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Introdução 


Este livro tem por objetivo fornecer aos profissionais envolvidos com o desen- 
volvimento para a web os conceitos fundamentais e as técnicas de programação 
necessárias ao desenvolvimento de interfaces responsivas com uso do framework 
Bootstrap. 


Para quem foi escrito este livro 

Este livro foi escrito para aquelas pessoas envolvidas na criação de sites tanto na 
área de design quanto na de desenvolvimento e programação, que desejam usar 
um framework mundialmente consagrado para criar interfaces usáveis e acessíveis 
em qualquer dispositivo, independentemente de suas características, isto é, que 
se adaptem às mais variadas resoluções de tela. 

O objetivo do livro é fornecer informações detalhadas dos componentes do fra- 
mework Bootstrap, estudando seus princípios e detalhando as funcionalidades 
previstas não somente pelo core (coração) do framework como também por cada 
um dos seus componentes. Explicações teóricas em linguagem corrente e clara, 
dispensando, sempre que possível, o jargão técnico avançado são acompanhadas 
de exemplos práticos explicados passo a passo e complementados por arquivo 
HTML para consulta. 

Para tirar o máximo proveito dos ensinamentos contidos em cada capítulo é pré- 
-requisito um razoável conhecimento de marcação HTML e das CSS e da criação 
de folhas de estilo. E desejável que o leitor tenha conhecimentos necessários para 
criar, com uso daquelas duas tecnologias, um layout simples de duas colunas. 

Os conceitos e o entendimento das técnicas de desenvolvimento de interfaces 
responsivas são poderosas ferramentas de apoio na criação de sites mais aces- 
síveis, enriquecendo a experiência do usuário. Profissionais da área de design, 
familiarizados com as técnicas aqui descritas, contarão com uma valiosa fonte 
de conhecimento e conceitos a empregar no planejamento das funcionalidades 
para incrementar suas criações, tornando-as universais. 
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Os iniciantes irão se beneficiar deste livro por começar seus estudos em uma 
fonte que aborda os princípios básicos de uso de frameworks CSS e das mais 
modernas técnicas de escrita do código, ensejando uma mudança no rumo de 
seu estudo que irá reduzir a curva de aprendizado e acelerar tal processo. Não 
se intimidem com conceitos ou terminologias que lhes sejam completamente 
desconhecidos nos primeiros capítulos. Com a sequência da leitura, as dúvidas 
tenderão a desaparecer naturalmente. 


Convenções tipográficas 

Com a finalidade de destacar diferentes tipos de informação neste livro, adotaram- 
-se algumas convenções tipográficas mostradas a seguir. 

Dica 

Texto contendo uma dica sobre o assunto tratado: 


Dica: Para suporte nativo das funcionalidades mostradas neste capítulo, consulte 
o site http://caniuse.com. 


Alerta 

Texto contendo um lembrete sobre procedimento extra com relação ao assunto 
tratado: 


Alerta: Convém ressaltar que o grid do Bootstrap foi criado segundo os princípios 
da filosofia mobile first e, logicamente, é responsivo. 


Terminologia 

Texto estabelecendo a adoção de grafia-padrão em todo o livro para termos ou 
frases com mais de uma terminologia, uma tradução ou um significado: 


Terminologia: Nos códigos desenvolvidos neste livro, adotou-se a sintaxe-padrão. 
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Boostrap 3.3.5 


Chamada 

Uma chamada para uma seção anterior na qual o assunto em questão foi expli- 
cado com detalhes. 

Por exemplo: 

Conforme estudamos no item [3.5.1.2] , por padrão, os botões são estilizados com 
um padding que determina suas dimensões. 

Neste exemplo, a chamada é para a seção 3.5.1.2, ou seja, capítulo 3 (o primeiro 
número indica o capítulo), item 5, subitem 1 subitem 2. 

Marcação e scrípts 

Nas marcações e nos Scripts que exemplificam a teoria, transcreveram-se somente 
os trechos que interessam ao assunto tratado. Omitiram-se os trechos que não 
dizem respeito ou não são relevantes para o entendimento do assunto, para não 
ocupar espaço desnecessário no livro. 

Blocos de marcação são marcados com fonte monoespaçada: 

<ul> 

<U><a href="#">Hopie</ax/li> 

<H><a href="#">Portfólío</ax/U> 

<U><a href="#">Loja</ax/U> 

<U><a href="#">Contato</ax/U> 

</ul> 

Trechos de marcação que merecem destaque são marcados em negrito: 

<script s rc=”//aj ax. googl eapi s. com/ajax/1 ibs/jquery/1. 11.2/j query. min. js”x/script> 
<script>window. jQuery || document.write( '<script src=" . . /bootstrap/ js/ jquery . min . js"> 

<\/ script>' )</script> 

<script type="text/javascript" src=" . ./bootstrap/js/bootstrap.min. js"x/script> 

<script type="text/ javascript"> 

$(' .dropdown-toggle')-dropdown(); 

</script> 

<body> 

<htnl> 

Para explicar passo a passo, quando julgado conveniente, cada linha do script 
foi apresentada com suas linhas numeradas e, a seguir, os comentários foram 
referenciados ao número da linha comentada: 
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1. <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data- 
target="#nodalLogin"> 

2. Abrir janela nodal 

3. </button 

4. <div class="nodal fade” id="modalLogin" tabindex="-l" role="dialog" aria- 
labelledby="nodalLoginLabel"> 

5. <div class="modal-dialog" role="docunent"> 

6. <div class="nodal-content"> 

7. <div class=''nodal-header"» 

8. <button type="button" class="close" data-dismiss="modal" 

aria-label="Close"> <span aria- hidden="true">&times; </ span></button> 

9. <h4 class="nodal-title">Área administrativa</h4> 

10. </di v> 

11. <div class="nodal-body"> 

12 <!-- conteúdo da janela nodal --> 

13. </div> 

14. <div class="nodal-footer"> 

15. <button type="button" class="btn btn-default" data -dismiss="modal"> 

Fechar</button> 

16. </div> 

17. </div> <!-- /.nodal-content --> 

18. </div> <!-- /.nodal-dilog --> 

19. </div> <! -- /.nodal --> 

[.../c5/modal-data-toggle.html] 

Código comentado: 

Linha(s) Descrição 

Linhas 1 a 3 Botão para abertura da janela modal. O atributo data-target deve apon- 

tar para o valor do atributo id do Container geral da janela; em nosso 
caso, o div#nodalLogin na linha 4. Opcionalmente, em lugar de um botão 
para abrir a janela, poderíamos usar um link, e neste caso o atributo 
href do link apontaria para o id do Container geral da janela; em nosso 
caso, href="#nodalLogin". Aclasse btn definida para o link de abertura da 
janela faz com que os mecanismos internos do Bootstrap transformem 
o link em um botão. Esse botão pode ser estilizado com uso de classes 
adicionais, tal como btn-prinary e btn-lg. Aclasse data- toggle, definida para 
aquele link, informa ao Bootstrap que a janela modal terá seu script 
de abertura e fechamento inserido automaticamente sem necessidade 
de codificação JavaScript pelo autor. 
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Linha(s) 

Linha 4 a 19 


Boostrap 3.3.5 


Linhas 5 e 6 


Descrição (cont.) 

Marcação do div Container da janela modal. A classe modal é de uso 
obrigatório e informa ao Bootstrap que trata-se do Container de uma 
janela modal. A classe fade faz com que o efeito de abertura seja por 
deslizamento da janela no sentido vertical, na direção de cima para 
baixo e com efeito de esmaecimento. Opcionalmente, podemos omitir 
o valor fade que produz o efeito de mostrar e esconder a janela sem 
deslizamento e esmaecimento, ou seja, abertura e fechamento fixa na 
sua posição. Sugiro fazer uma cópia do exemplo e retirar a classe fade 
verificando na prática os dois efeitos de abertura/fechamento. O atributo 
id é de livre escolha do autor. 

Containers auxiliares para estilização e Scripts. 


Arquivos para download 

Os Scripts mostrados no livro estão disponíveis para consulta online em 
http://livrosdomaujor.com.br/bootstrap3/codigos.html. Os arquivos foram nomeados 
com sintaxe própria, conforme o exemplo a seguir: 

http://livmsdomaujor.com.br/bootstrap3/Lodigos/c4/botoes-dropdown.html 

Este é o URL (endereço na web) do arquivo que mostra um exemplo contido no 
capítulo 4 do livro e referente à funcionalidade dropdown para botões. 

Adicionalmente, ao final da marcação, há uma indicação do endereço para o 
arquivo conforme convenção mostrada no exemplo a seguir: 

• HTML 

<div class=”btn-group”> 

<button type="button" class="btn btn -def ault>EDITAR</button> 

<button type="button" class="btn btn-default dropdown-toggle' 1 
data-toggle="dropdown" aria-expanded="false"> 

EDITAR <span dass="caret"x/span> 

</button> 

<ul class="dropdown-nenu" role="nenu"> 

<li><a href="#">novo</a></li> 

<lixa href="#">abrir</ax/U> 

<U><a href="#">fechar</ax/U> 

<li class="divider"x/U> 

<lixa href="#">salvar</ax/U> 

</ul> 

</div> 

[.../c4/botoes-dropdown.html] 
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Destaques em geral 

Palavras ou termos cujo significado deva ser destacado são grafados em itálico. 
Por exemplo: 

O Bootstrap oferece ainda alguns grupos de classes para estilização avançada de 
tooltip em forma diversa daquela do tooltip básico. 

Variáveis 

Valores variáveis em códigos são grafados em itálico. 


Arquivos dos exemplos do livro 

Os links para os arquivos dos exemplos deste livro constam de uma página web 
localizada em http://www.livrosdomaujorcom.br/bootstrap3/codigos.html. 

Por tratar-se de um livro oferecido gratuitamente, tanto o autor como a editora se 
desobrigam de prestação de qualquer tipo de suporte técnico aos leitores. 
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CAPÍTULO 1 

Apresentação do Bootstrap 


Neste capítulo, faremos a apresentação do framework Bootstrap. Veremos a de- 
finição, o histórico e as razões para o uso do Bootstrap. Listaremos as seções e 
seus conteúdos onde constam os assuntos a serem tratados no livro. Mostraremos 
como criar o template mínimo para desenvolver uma aplicação, apresentaremos 
o Bootlint e abordaremos o suporte e a acessibilidade do framework. 

Ao longo dos textos e das explicações contidas no livro, para não repetir exaus- 
tivamente o termo “framework Bootstrap”, o abreviaremos para simplesmente 
Bootstrap. Assim, neste livro, salvo indicação contrária, Bootstrap é o mesmo que 
framework Bootstrap. 


1.1 Introdução 

Bootstrap é o mais popular framework JavaScript, HTML e CSS para desenvol- 
vimento de sites e aplicações web responsivas e alinhadas com a filosofia mobile 
first. Torna o desenvolvimento front-end muito mais rápido e fácil. Indicado para 
desenvolvedores de todos os níveis de conhecimento, dispositivos de todos os 
tipos e projetos de todos os tamanhos. 


1.1.1 Definição 

O site do Bootstrap o define como um poderoso, elegante e intuitivo framework 
front-end que possibilita um desenvolvimento web de modo ágil e fácil. 
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1.1.2 Histórico 
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No dia 19 de agosto de 2011, Mark Otto ( @mdo ), um desenvolvedor trabalhando 
noTwitter, criador do Bootstrap juntamente com JacobThornton ( @fat ), anunciou 
ao mundo o lançamento do Bootstrap em um artigo publicado no blog do Twitter. 

Iniciou o artigo dizendo estar feliz com o lançamento de um kit de ferramentas 
front-end destinado a agilizar o desenvolvimento de aplicações web. 

Naquele artigo, relatou que no início do Twitter cada desenvolvedor usava a 
biblioteca que lhe era familiar para solucionar os problemas de front-end. Esse 
procedimento criou inconsistências, dificultando a integração, a escalabilidade e 
a manutenção das aplicações criadas por diferentes desenvolvedores da equipe. 

Bootstrap foi a proposta de solução para aquelas inconsistências. Apresentada na 
primeira Twitter Hackweek realizada na semana de 22 a 29 de outubro de 2011, 
de lá saiu com sua primeira versão estável e pronta para uso. 


1.1.3 Por que usar Bootstrap 

No artigo de lançamento do Bootstrap, Mark Otto, ao explicar as razões para 
usar Bootstrap, começa afirmando que o coração do Bootstrap nada mais é do 
que CSS criado com LESS, um pré-processador destinado a gerar folhas de estilos 
CSS capaz de oferecer muito mais flexibilidade e poder do que as folhas de estilos 
convencionais, ou não processadas. Posteriormente foram criadas funcionalidades 
que permitem usar não somente LESS, mas também SASS como pré-processador 
CSS para o Bootstrap. 

LESS e SASS são capazes de oferecer uma vasta gama de funcionalidades, tais 
como declarações CSS aninhadas, variáveis para valores de propriedades CSS, 
mixins (espécie de classe capaz de ser reusada), operadores e funções para de- 
claração de cores. 

Uma vez compilado via LESS ou SASS, o resultado é uma folha de estilos pura, 
cuja implementação na aplicação é muito simples; basta linear o arquivo CSS ao 
documento. Outro benefício é que não há imagens, Flash ou JavaScript adicionais, 
somente folha de estilos. 

Não é do escopo deste livro detalhar o uso dos pré-processadores LESS e SASS 
para criar folhas de estilos para o Bootstrap. 
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1.1.4 Seções da documentação do Bootstrap 

Para fins de estudo, adotaremos neste livro as mesmas cinco seções constantes do 
site do Bootstrap, conforme listadas a seguir. 

• Introdução - Seção de apresentação dos fundamentos ou da fundação inicial 
para a criação com uso do Bootstrap. Nessa seção são listadas as ferramentas 
de desenvolvimento, os arquivos do download do Bootstrap e a criação do 
ambiente de desenvolvimento. São mostrados os templates HTML5 para 
criação de aplicações em layouts fixos, fluidos e responsivos. 

• CSS - Nessa seção são mostradas as regras CSS comuns, tais como definições 
de valores CSS para tipografia em geral, CSS reset etc. São ainda detalhadas 
as declarações CSS para vários elementos da marcação HTML, tais como 
tabelas, formulários, botões, imagens, uso de ícones e muito mais. 

• Componentes - Nessa seção se estuda a criação de componentes de interface. 
Os componentes de interface previstos no Bootstrap são listados a seguir. 

• Glifos 

• Dropdown 

• Agrupamento de botões 

• Dropdown com botões 

• Grupamento de inputs 

• Navegação 

• Barra de navegação 

• Breadcrumbs (caminho da navegação) 

• Paginação 

• Rótulos e marcadores 

• Badges (marca de destaque) 

• Jumbotron (tela de destaque) 

• Page header (elemento hl) 

• Thumbnails 

• Alertas 

• Barra de progresso 
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• Objetos de mídia 

• Grupamento de listas 

• Painéis 

• Embed responsivo 

• Wells (Container estilizado com bordas arredondadas, cor de fundo e 
efeito inset) 

• Plugins - Nessa seção se estuda a integração dos plugins JavaScript com o 
Bootstrap. Os componentes gerados pelos plugins e as considerações sobre 
o uso da linguagem previstos no Bootstrap são listados a seguir. 

• Visão geral 

• Transições 

• Janelas modais 

• Dropdown 

• Scrollspy 

• Abas 

• Tooltip 

• Popover 

• Alertas 

• Botões 

• Collapse 

• Carousel 

• Affix 

• Personalização - Trata-se de uma ferramenta online para fazer download 
personalizado de acordo com as necessidades específicas de um projeto. 
Essa ferramenta encontra-se em http://getbootstrap.com/customize/ e seu uso 
é bem fácil e intuitivo. 

Cada uma das seções listadas anteriormente será objeto de estudo e detalhamento 
neste livro. 
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1.2 Ferramentas de desenvolvimento 

Para desenvolver um layout e criar os componentes gráficos de uma aplicação web, 
você precisa de um editor de texto, um navegador web e obviamente a estrutura 
de arquivos do Bootstrap. Se você optou por estudar o assunto proposto neste 
livro, supõe-se que tem um conhecimento razoável de marcação HTML e folhas 
de estilos CSS, assuntos estes que não fazem parte do escopo do livro. 

Não vou indicar um editor de texto e navegador web, pois como você conhece 
HTML e CSS, já usa um deles. Assim, use o editor de texto e o navegador de sua 
preferência. 


1.3 Download 

Na homepage do site do Bootstrap, em http://getbootstrap.com, você encontra um 
link para download do Bootstrap. 

São disponibilizadas três versões para download denominadas Bootstrap, Source 
e SASS. A versão Bootstrap é a mínima requerida para criação com uso de todas 
as funcionalidades do Bootstrap, e é ela que usaremos neste livro. A versão Source 
inclui toda a documentação do Bootstrap, e a versão SASS é para uso com o pré- 
-processador. 

Faça o download da versão Bootstrap, descomprima o arquivo compactado em 
uma pasta de sua livre escolha, e você terá a estrutura de pastas e arquivos, como 
mostrado na figura 1.1. 

Na figura 1.1, repare que existem arquivos que têm uma forma compactada (mi- 
nificada - .min) e uma forma não compactada. A forma não compactada é para 
uso opcional em fase de produção, pois são arquivos comentados e estruturados 
visualmente para fácil leitura por humanos. 

Depois de lançado o projeto, esses arquivos deverão ser substituídos pelos seus 
equivalentes compactados, que são mais leves e de carregamento mais rápido, mas 
não se esqueça de compactar o arquivo caso você tenha feito alguma modificação 
no original, o que é pouco provável. 

A pasta-raiz obtida com a descompactação do arquivo zipado do download 
denomina-se bootstrap-versão-dist, em que versão é a versão atual do Bootstrap 
(por exemplo, bootstrap-3.3.5-dist para o download da versão 3.3.5). Na pasta-raiz 
encontram-se três subpastas - css,fonts,js -, e dentro delas, os arquivos, conforme 
mostrados na figura 1.1. 
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I bootstrap-versão-dist 
Dcss 

• Q bootstrap.css 

• [2 bootstrap.css.map 
|J| bootstrap. min.css 

• [2 bootstrap-theme.css 

• [3] bootstrap-theme.css.map 
[3l bootstrap-theme.min.css 

* | fonts 

[3] glyphicons-halflings-regular.eot 
[3] glyphicons-halflings-regular.svg 
[3] glyphicons-halflings-regular.ttf 
[3j glyphicons-halflings-regular.woff 
[3l glyphicons-halflings-regular.woff2 



bootstrap.js 

bootstrap.min.js 

npm.js 

jquery.min.js I 


Figura 1.1 - Arquivos do download do Bootstrap. 

Observe na figura que alguns arquivos foram destacados com a marca de uma 
bolinha. Tais arquivos podem ser apagados da pasta caso você não os use em 
fase de produção. Se usá-los, apague depois de lançado o projeto, pois, como dito 
anteriormente, devem ser substituídos pelos seus correspondentes minificados. 

A seguir alguns comentários sobre a finalidade dos arquivos. 

• bootstrap.css é o arquivo principal de estilização do Bootstrap em versão 
não comprimida. Usa-se a mesma versão comprimida (ou minificada) 
bootstrap.min.css. Se você pretende desenvolver uma folha de estilos persona- 
lizada, dê a ela um nome tal como custom.css, e quando terminar, comprima 
o arquivo. Atrele sua folha de estilo personalizada ao documento criando 
um link para ela depois do link que aponta para bootstrap.min.css. 

• bootstrap-themexss é um arquivo de estilização do Bootstrap que adiciona 
efeitos especiais de sombras, gradientes, 3D etc. em componentes tais como 
botões, painéis, caixas de destaque etc. Usa-se a mesma versão comprimida 
(ou minificada) bootstrap-theme.min.css. Se você pretende adicionar tais efeitos 
especiais em sua interface, use este arquivo. O arquivo bootstrap-theme.min.css é 
um arquivo de uso facultativo. Nos exemplos constantes deste livro, usaremos 
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esta folha de estilos. Para verificar seus efeitos na prática, comente na marcação 
da seção head do exemplo, o link que aponta para essa folha de estilos. 


Alerta: Caso sua opção seja por usar os efeitos especiais de estilização, o link para 
o arquivo bootstrap-theme.min.css deverá vir na marcação HTML depois do link 
para o arquivo bootstrap.min.css. 


• bootstrap.css.map e bootstrap-theme.css.map são arquivos destinados a mapear 
arquivos CSS minificados e fazê-los legíveis para humanos em ferramentas 
de debug, tipo as ferramentas do desenvolvedor nativas dos navegadores. 
Usam-se somente em fase de desenvolvimento de funcionalidades e temas 
CSS e não têm efeito sobre o produto final (o site ou a aplicação) criado. 

• bootstrap.js é o arquivo, em versão não comprimida, que contém os Scripts 
que fazem funcionar os plugins nativos do Bootstrap. Usa-se a mesma 
versão comprimida (ou minificada) bootstrap.min.js. Se você pretende desen- 
volver scripts personalizados, dê ao arquivo um nome tal como custom.js e, 
quando terminar, comprima o arquivo. Atrele seus scripts personalizados 
ao documento criando um link para o arquivo depois do link que aponta 
para bootstrap.js. 

• npm.js é o arquivo para instalação do Bootstrap com NPM (fora do escopo 
deste livro). 

O arquivo denominado jquery.min.js em destaque na figura não faz parte do download. 
Caso seu projeto preveja uso de componentes que usam JavaScript (plugins na- 
tivos do Bootstrap), será necessário carregar a biblioteca j Query na versão 1.11.2 
ou posterior. Consulte o site da j Query para decidir qual é a versão mais atual (e 
posterior à j Query 1.11.2) indicada para os navegadores aos quais você quer servir 
seu projeto. 

Assim, deve-se, obrigatoriamente, fazer o download da biblioteca no site 
http://jquery.com e ter o arquivo gravado na pasta js do download. Ele servirá 
como fallback para o caso de falha no link para um CDN, como veremos no item 
[1.4] adiante. 

Essa é a configuração básica do Bootstrap necessária à criação de layouts fixos, 
fluidos e responsivos. Com apenas o arquivo CSS bootstrap.min.css lincado ao 
documento você poderá começar a explorar essa poderosa ferramenta, e com o 
progresso no estudo e a consequente necessidade de uso de componentes que 
dependem de JavaScript, irá precisar linear também o arquivo bootstrap.min.js. 
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1.4Templates HTML 

O Bootstrap foi desenvolvido e otimizado para ser usado com marcação HTML5. 
Assim o template mínimo para criar uma aplicação que use o Bootstrap é mos- 
trado a seguir. 

< ! DOCTYPE htnl> 

<htnl lang="pt-br"> 

<head> 

<neta charset="utf-8"> 

<neta http-equiv="X-UA-Compatible" content="IE=edge"> 

<neta name="viewport " content="width=device-width, initial- scale=l"> 

<!-- Estas 3 neta tags deven obrigatorianente ser as prineiras na seção head 
<!-- As denais deven vir depois delas 

<title>Tenplate nínino para uso do Bootstrap</title> 

<link href=". ,/bootstrap/css/bootstrap.nin.css" rel="stylesheet"> <!-- CSS do Bootstrap --> 
<!-- HTML5 shin and Respond.js para suporte dos elenentos HTML5 e das nédia queries ao IE8 — > 
<!-- Atenção: Respond.js não funciona en páginas carregadas con uso do protocolo file:// 

<! - - [if lt IE 9]> 

<script src="https://oss.naxcdn.con/htnl5shiv/3.7.2/htnl5shiv.nin. js"></script> 
<script src="https://oss.naxcdn.con/respond/1.4.2/respond.nin. js"></script> 

< ! [endif ] - -> 

</head> 

<body> 

<hl>Título da aplicação</hl> 

</body> 

</htnl> 

Com este template é possível desenvolver uma aplicação web que use as funciona- 
lidades do Bootstrap que dependem apenas de estilização, por exemplo: tipografia, 
botões, painéis, seção em destaque etc. Não é possível usar as funcionalidades 
que dependem dos plugins JavaScript nativos do Bootstrap, por exemplo: barras 
de navegação, janelas modais, slideshow etc. 


Alerta: Nos exemplos constantes deste livro não será considerado o suporte para 
o IE8. 


Caso você queira usar, no seu projeto, os 12 plugins nativos do Bootstrap, lis- 
tados na seção JavaScript do item [1.1.4], deverá incluir no template, mostrado 
anteriormente, a biblioteca j Query e o aquivo bootstrap.min.js, como mostrado 
em destaque a seguir. 
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<body> 

<hl>Título da apücação</hl> 

<!-- jQuery (caso se use plugins JavaScript do Bootstrap) --> 

«script src="http : / /code . jquery . con/ jquery-1 . 11 . 2 .min . js" type="text/ javascript"> 
</script> 

<script type="text/javascript"> // fallback para jQuery 
//< ! [CDATA[ 

(window. jQuery) | |docupient.write('<script type="text/javascript" 
src=" . . /bootstrap/ js/ jquery . min . js"x\/script> ');//]]> 

</script> 

<!-- Bootstrap 

«script type="text/javascript" src=". ./bootstrap/js/bootstrap.nin. js"x/script> 

</body> 

</htnl> 

Conforme mostrado no código, é de boa prática usar um CDN para linear para 
a biblioteca j Query Em nosso caso, escolhemos o CDN da j Query Caso o link 
para o CDN apresente qualquer problema, existe um link alternativo (fallback) 
para um arquivo da biblioteca j Query hospedado no servidor da aplicação e 
colocado na pasta js do download, conforme mostrado e comentado na figura 1.1. 

Alternativamente, você pode usar o CDN Google, apontando para: 

http://ajax.googleapis.com/ajax/libs/jquery/ultima-versao/jquery.min.js 

ou o CDN da Microsoft, apontando para: 

http://ajax.aspnetcdn.com/ajax/jquery/jquery-ultima-versao.js 


Alerta: Ao optar por um CDN, confira se a versão que você quer usar já está 
hospedada no CDN. Cole o endereço do arquivo na caixa de endereços do 
navegador e certifique-se de que o link não está “quebrado” e aponta para o 
arquivo pretendido. 


Opcionalmente, você poderá usar o CDN do Bootstrap (http://www. bootstrapcdn. comí) 
para linear, também, os arquivos do Bootstrap como mostrado a seguir: 

<!-- Versão conpilada e ninificada das CSS --> 

<Unk rel="stylesheet" 

href="https://naxcdn. bootstrapcdn. con/bootstrap/3. 3. 5/css/bootstrap.ni.n.css"> 

<!-- Tena opcional --> 
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<Unk rel="stylesheet" 

href="https: //maxcdn . bootstrapcdn . com/bootstrap/3 . 3 . 5/css/bootstrap- theme . min . css"> 
<!-- Versão conpilada e ninificada da JavaScript --> 

<script src="https://naxcdn.bootstrapcdn.coi'i/bootstrap/3.3.5/js/bootstrap.nin. js"> 
</script> 

Convém notar que o arquivo bootstrap.min.js contém todos os plugins do Bootstrap. 
É muito provável que o seu projeto use somente alguns deles. Para estas situações 
existe a possibilidade de personalizar o download, obtendo somente os plugins 
necessários ao projeto. 

Convém notar que nestas situações devemos usar a versão do download perso- 
nalizado e não um CDN que fornece todos os plugins. 

Para personalizar o download dos plugins e também das CSS e dos componentes 
do Bootstrap, visite a página http://getbootstrap.com/customize/no site do Bootstrap. 


1.5 Bootlint 

Bootlint é uma ferramenta de desenvolvimento, oficial do Bootstrap, destinada a 
examinar a marcação HTML criada para uma aplicação ou um site desenvolvido 
com uso de Bootstrap e informar aos desenvolvedores possíveis “bugs” ou não 
conformidades encontradas na marcação. 

A ferramenta é fornecida em forma de bookmarklet (para ser instalada em um 
navegador); seu código e as instruções de instalação podem ser encontrados no 
GitHub em http://kwz.me/I4. 

Das diversas formas de instalação, a mais simples e imediata é arrastar o código 
JavaScript do bookmarklet, que se encontra no GitHub sob o título “Getting 
Started”, subtítulo “In the browser”, para a barra de favoritos do navegador. 

Depois de instalá-la como favorito no navegador, abra a página web que contém 
a marcação HTML para o Bootstrap e abra também o console do navegador. 
Limpe o console e clique no bookmarklet criado nos favoritos. Como resultado 
será aberta uma janela tipo alerta da JavaScript informando sobre a existência 
ou não de “bugs” na página. 

Feche a janela e, caso existam “bugs”, eles serão descritos sumariamente no console 
do navegador e um código será fornecido. No GitHub, em http://kwz.me/IO, você 
encontra a descrição de cada código. 
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É altamente recomendável instalar e usar esta ferramenta no seu ambiente de de- 
senvolvimento verificando constantemente as marcações criadas e não deixando 
para verificar tudo no final do projeto. 


1.6 Modelo CSS e o box-sizing 

O Bootstrap declara, em sua folha de estilos, o moderno Modelo CSS modificado 
usando a propriedade CSS box-sizing de modo a excluir padding e nargin das dimen- 
sões dos boxes, conforme a regra de estilos mostrada a seguir. 

* { 

-webkit-box-sizing: border-box; 

-moz-box-sizing: border-box; 
box-sizing: border-box; 

} 

*:before, 

*:after { 

-webkit-box-sizing: border-box; 

-moz-box-sizing: border-box; 
box-sizing: border-box; 

} 

Esta declaração pode conflitar com softwares de terceiros, tais como Google Maps 
e Google Search Engine, inseridos em uma página que use o Bootstrap, pelo fato 
de tais softwares usarem em suas CSS o Modelo CSS tradicional. 

Assim, esteja ciente de que se o layout em sua página “quebrar” por causa da 
inserção de um widget ou outro software qualquer pertencente a terceiros, será 
necessário que você localize e isole a parte da marcação HTML onde o problema 
ocorre e crie uma folha de estilo específica para reverter o modelo CSS naquele 
trecho da marcação, ou, em lugar de uma folha de estilos específica, adicione regras 
CSS, conforme sugeridas a seguir, na folha de estilos do Bootstrap. 

Como regra geral, existem duas soluções para estes casos. A primeira, reverter o 
modelo CSS para um elemento da marcação; e a segunda, para uma determinada 
região da marcação, conforme sugerido a seguir. 

/* Opção 1: para un elemento da marcação */ 

.element { 

-webkit-box-sizing: content-box; 

-moz-box-sizing: content-box; 
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box-sizing: content-box; 

} 

/* Opção 2: para una região da narcação cujo elenento ancestral deve receber a classe 
reset-box-sizing */ 

.reset-box-sizing, 

.reset-box-sizing *, 

.reset-box-sizing *:before, 

.reset-box-sizing *:after { 

-webkit-box-sizing: content-box; 

-noz-box-sizing: content-box; 
box-sizing: content-box; 

} 

1.7 Acessibilidade 

O Bootstrap contém funcionalidades que facilitam o cumprimento das diretrizes 
de acessibilidade previstas pelo W3C. 

Para criar um link que permita às tecnologias assistivas pular o menu de navegação 
e ir para o conteúdo, são previstas as classes sr-only e sr-only-focusable, que devem 
ser aplicadas a uma marcação-padrão, conforme mostrado a seguir. 

<a href="#conteudo" class="sr-only sr-only-focusable''>Pular para o conteúdo</a> 

<!-- nenu de navegação --> 

<div id="conteudo" tabindex="-l"> 

<!-- Conteúdo principal da página --> 

</div> 

A marcação mostrada, quando for o caso de se usar, deve ser colocada no início 
da página. As classes sr-only e sr-only-focusable são nativas do Bootstrap. 

A classe sr-only faz com que o texto do link não seja visível na tela, mas “visto” 
por tecnologias assistivas, tais como leitores de tela. 

Para usuários sem restrições visuais que navegam com auxílio do teclado, a classe 
sr-only-focusable faz com que o texto do link se torne visível quando o link recebe o foco. 

O par atributo/valor tabindex="-l" corrige bugs de foco em alguns navegadores. 

O exemplo prático mostrado a seguir cria um link tipo "Pular navegação" e 
encontra-se disponível para consulta online. Não se preocupe com a marcação 
HTML que não esteja em destaque. Ela é própria do Bootstrap e será estudada 
no próximo capítulo. 
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<a href="#conteudo" class="sr-only sr-only-focusable">Pular para o conteúdo</a> 


<div class="row"> 

<div class="col-rnd-6"> 

<h3>Menu de navegação</h3> 
<p>Extensa lista de Unks</p> 
<ul> 

<U><a href="#">link</ax/li> 
<!-- mais links --> 

</ul> 

</div> <! -- /. .col-md-6 --> 

</div> <!-- /.row --> 


<div class="row"> 

<div class="col-md-6"> 

<hl id="conteudo" tabindex="-l">Conteúdo principal da página</hl> 

<p>bla. . .bla. . .bla. . ,bla</p> 

<! -- mais conteúdo --> 

</div> <!-- /.col-md-6--> 

</div> <!-- /.row --> 

[.../cl/pular-navegacao.html] 

Abra este arquivo em um navegador e pressione a tecla Tab. Essa ação irá revelar 
no topo da página o texto do link. A seguir, tecle Enter para navegar diretamente 
para o conteúdo da página. 


1.8 Suporte 

O Bootstrap foi criado para funcionar em navegadores modernos tanto em desktop 
como em dispositivos móveis. Navegadores antigos falharão na estilização, mas a 
parte funcional da página será preservada. 

Quanto ao Internet Explorer, o suporte é consistente nas versões IE9 e superio- 
res. Se você pretende servir sua aplicação para o IE8, deve incluir os Scripts shim 
e Respond.js que se destinam a possibilitar que aquele navegador reconheça os 
elementos da HTML5 e as regras media queries respectivamente, pois ele não 
oferece suporte nativo para tais funcionalidades. Não é do escopo deste livro 
detalhar as implicações e os detalhes de funcionamento e inclusão destes Scripts. 
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Os exemplos constantes deste livro não consideram o suporte para o IE8. 

Observe as tabelas 1.1 e 1.2 detalhando o suporte ao Bootstrap por dispositivos 
e navegadores. 


Tabela 1.1 - Suporte ao Bootstrap por navegadores 



Chrome 

Firefox 

Internet Explorer 

Opera 

Safari 

Android 

SIM 

SIM 


NÃO 

N/A 

iOS 

SIM 

N/A 

N/A 

NÃO 

SIM 

Mac OS X 

SIM 

SIM 


SIM 

SIM 

Windows 

SIM 

SIM 

SIM 

SIM 

NÃO 


Tabela 1.2 - Suporte ao Bootstrap pelos IE8 e IE9 


Funcionalidade 

Internet Explorer 8 

Internet Explorer 9 

border-radius 

NÃO 

SIM 

box-shadow 

NÃO 

SIM 

transform 

NÃO 

SIM, com prefixo -ms 

transition 

NÃO 

placeholder 

NÃO 


Para suporte às funcionalidades HTML5 e CSS3 em geral, consulte o site caniuse 
( http://kwz.me/I5 ). 

Isso é tudo que você precisa para começar o estudo do Bootstrap. Nos próximos 
capítulos, detalharemos as funcionalidades do Bootstrap desenvolvendo exemplos 
práticos que mostram desde a criação de simples componentes de interfaces até 
o desenvolvimento de layouts complexos. 

Para os exemplos constantes deste livro, criamos uma pasta-raiz denominada 
codigos e, dentro dela, uma subpasta denominada bootstrap contendo o diretório e 
os arquivos obtidos do Bootstrap, ou seja, renomeamos a pasta bootstrap-versão-dist 
mostrada na figura 1.1 para simplesmente bootstrap e mais subpastas para os 
capítulos (cl, c2, c3, c4 etc.) contendo os arquivos dos exemplos, tudo conforme 
mostrado na figura 1.2. 
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" I codigos 

P 1 bootstrap 

□ « 

|i| bootstrap. min.css 

d bootstrap-theme. min.css 

~ | fonts 

d glyphicons-halflings-regular.eot 
d glyphicons-halflings-regular.svg 
d glyphicons-halflings-regular.ttf 
d glyphicons-halflings-regular.woff 
d glyphicons-halflings-regular.woff2 

1=1 bootstrap.min.js 
d jquery.min.js 

D d 

d exemplol.html 
d exemplo2.html 
d mais exemplos 


Figura 1.2 - Estrutura de pastas para arquivos dos exemplos do livro. 
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CAPÍTULO 2 

Fundamentos 


Neste capítulo estudaremos os fundamentos do Bootstrap. Será mostrada a nor- 
malização via reset de valores de propriedades CSS. Mostraremos a criação de um 
grid fixo para desenvolvimento de layouts e, no final do capítulo, estaremos cientes 
dos conceitos básicos de frameworks CSS em geral e em condições de começar o 
estudo da estrutura do grid e das funcionalidades do Bootstrap. 


2.1 Marcação HTML 

O Bootstrap foi criado para ser usado com a linguagem de marcação HTML5. 
As suas funcionalidades foram desenvolvidas considerando certos elementos 
exclusivos daquela linguagem, bem como de propriedades CSS avançadas que 
requerem o uso da HTML5. 

Assim, a marcação HTML de uma aplicação deverá obrigatoriamente conter o 
DOCTYPE da HTML5 como mostrado a seguir. 

< ! DOCTYPE htnl> 

<htnl lang="pt-br"> 

</htnl> 


2.2 CSS reset 

O termo reset no contexto de programação pode ser traduzido, usando linguagem 
não técnica, como a ação de “zerar” valores previamente definidos. 

CSS reset é uma técnica inventada por Eric Meyer ( http://meyerweb.com/eric/tools/css/ 
reset/) no ano de 2007, amplamente usada desde então, que consiste em se definir 
uma folha de estilos cuja finalidade é “zerar” valores CSS padrão dos navegadores. 
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Todo navegador tem uma folha de estilos nativa que define as propriedades CSS 
iniciais dos elementos da marcação. Você poderá visualizar essa folha de estilos 
em ação ao criar um documento onde faça constar, por exemplo, cabeçalhos (hl, 
h2, h3 etc.), parágrafos (p), listas (ol, ul, dl) etc. Ao visualizar o documento em um 
navegador, note que os conteúdos dos elementos da marcação têm uma estilização 
inicial, sem que você tenha declarado qualquer folha de estilos. A cor de fundo 
do elemento body é branca, os textos são em preto, cabeçalhos são em negrito com 
tamanhos de fonte diferentes, a fonte é da família serif, existem margens entre 
cabeçalhos e parágrafos, listas são endentadas, e por aí vai. 

Se você decidiu criar o documento sugerido, experimente visualizá-lo em diferentes 
navegadores e compare as renderizações. Vai notar, nos diferentes navegadores, 
que muitos dos estilos aplicados são os mesmos, tais como cor de fundo bran- 
ca do elemento body, preta dos textos, negrito em cabeçalhos, família serif para 
fontes etc. Notará também que a renderização não é exatamente a mesma, por 
exemplo, quando se trata do posicionamento e do tamanho dos textos na página. 
Isso acontece porque cada navegador adota sua folha de estilos própria e alguns 
valores CSS nessas folhas, tais como valores para as propriedades nargin, Une-height, 
font-size etc., diferem de um navegador para outro. Isso em determinados casos 
pode ser desastroso para o layout e pode exigir do desenvolvedor trabalho extra 
para tratar das inconsistências entre navegadores resultantes das diferenças entre 
folhas de estilos nativas. 

A finalidade das CSS reset, que nada mais são do que um conjunto de declarações 
de estilos (uma folha de estilos), é padronizar, para os navegadores, a renderização 
inicial dos elementos da marcação, zerando os valores de algumas propriedades 
CSS, tais como nargin e padding, e estabelecendo um valor-padrão para outras, tais 
como line-height, vertical-align, font-size, sobrescrevendo a folha de estilos nativa 
do navegador e resolvendo o problema da inconsistência de estilização inicial 
entre navegadores. 

No início de 2012, Nicolas Gallagher, um desenvolvedor trabalhando 
no Twitter, e Jonathan Neal criaram o projeto denominado normalize. css 
( http://necolas.github.com/normalize.css/ ), cuja proposta era disponibilizar para a 
comunidade de desenvolvedores front-end uma folha de estilos reset destinada a 
padronizar a renderização nativa dos navegadores. Na página do projeto, os au- 
tores discorrem sobre as diferenças e vantagens de usar normalize.css em relação 
as CSS reset de Eric Meyer. 

O Bootstrap, o projeto HTML5 Boilerplate, a NASA, entre outras grandes 
companhias, atualmente usam o normalize.css. Mesmo que você já conheça as 
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técnicas de CSS reset, aconselho a abrir a página contendo a folha de estilos 
de normalize.css clicando o link para download do arquivo no endereço web 
http://necolas.github.com/normalize.css/. Inspecione atentamente as declarações CSS, 
especule consigo mesmo sobre a finalidade de cada uma delas e acrescente mais 
esse conhecimento ao seu acervo profissional. 

A folha de estilos normalize.css foi incorporada dentro da folha de estilo do 
Bootstrap. Assim, você não precisa criar link para o arquivo normalize.css, pois ele 
já consta da folha de estilo nativa do Bootstrap. 


2.3 Sistema de grid para layout 

Criar layout CSS baseado em um grid inicial é uma técnica que surgiu em 2007 e 
proporcionou o aparecimento de grids prontos, publicados por seus autores, para 
uso pelos desenvolvedores web. Tais grids constituem os chamados frameworks 
CSS para criação de layouts ou simplesmente grids CSS, e o Bootstrap se baseia 
em grid. 

Um dos sistemas de grid CSS pioneiro denomina-se Blueprint 
(. http://www.blueprintcss.org/ ) e é usado até hoje. Logo foram lançados outros sis- 
temas, e atualmente existem dezenas deles, sendo que um dos mais conhecidos 
dos autores CSS é o sistema 960 Grid Sistem ( http://960.gs/ ). 

Usar um framework baseado em grid para desenvolver layouts CSS é um assun- 
to polêmico e não é do escopo deste livro discutir a conveniência ou enumerar 
aspectos negativos e positivos do seu uso. No entendimento deste autor, dois 
aspectos são indiscutíveis quando se trata de criar um layout baseado em grid 
versus a codificação “a unha”: agilização do processo de criação e possibilidade 
de usar as funcionalidades do grid de forma modular. 

A agilização do processo traz como benefício imediato a redução do tempo de 
trabalho para atingir o resultado final, e nós, desenvolvedores, sabemos muito 
bem como os prazos são curtos. Um framework para criação de layout bem pro- 
jetado é de natureza modular, ou seja, possibilita ao autor usar estritamente as 
funcionalidades específicas ao seu projeto, sem a necessidade de carregar arquivos 
desnecessários. 


Dica: Uma das características do Bootstrap é a sua natureza modular, materializada 
na existência de uma interface gráfica, no site do projeto, destinada a fazer o 
download personalizado do Bootstrap ( http://getbootstrap.com/customize/ ). 
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O sucesso de um projeto web começa com um planejamento bem feito no qual a 
escolha das ferramentas e o detalhamento das fases do desenvolvimento são de 
importância fundamental. Assim, usar um framework grid ou codificar “a unha” 
é uma decisão que cabe à equipe de desenvolvimento. 

Sem dúvidas, o inventor ou os inventores dos sistemas de grid CSS, tal como é 
conhecido atualmente, tiveram um ideia brilhante e digna de admiração, sem 
contar a enorme contribuição que fizeram ao desenvolvimento web colocando 
nas mãos dos autores uma ferramenta extremamente poderosa, ágil e fácil de 
aprender, destinada à criação de layouts CSS. Atualmente, uma quantidade con- 
siderável de sites foi desenvolvida com uso de grid CSS. 

O W3C lançou em abril de 2011 um Rascunho de Trabalho denominado Grid 
Layout, renomeado em 22 de março de 2012 como CSS Grid Layout, descrevendo 
funcionalidades para criação de layouts baseados em grids. Essa especificação está 
no seu início de desenvolvimento e demandará algum tempo até que possa ser 
usada em produção. O curioso é que o Internet Explorer 10 é, desde dezembro de 
2012, o único navegador que implementou as funcionalidades previstas naquela 
especificação, devendo-se usar o prefixo proprietário -ns- para declarar as regras 
CSS nela previstas. Posteriormente a especificação alterou a sintaxe, mas o IE 
continua a dar suporte à sintaxe antiga. 

A ideia que inspirou o sistema de grid CSS é muito simples. Uma vez conhecido 
o mecanismo de funcionamento, somos imediatamente levados a fazer a clássica 
pergunta a nós mesmos: “Como eu não pensei nisso?”. 

Grid significa malha e tecnicamente pode ser descrito como uma estrutura bi- 
dimensional formada por eixos (ou linhas retas) verticais e horizontais que se 
interceptam, criando uma estrutura de malha com células definidas pelas quatro 
interseções de eixos verticais com eixos horizontais. 

A diagramação dos conteúdos e a consequente criação do layout se faz com uso 
dessa malha com suas células servindo de Container para conteúdos a diagramar 
(ou “layautar”). Células podem ser combinadas na horizontal e/ou na vertical de 
modo a criar containers de tamanhos diferentes. 

A técnica de uso de grid em tipografia foi introduzida no currículo acadêmico 
da formação de designers na metade dos anos 70 e começou a ser usada para 
diagramar conteúdos destinados à mídia impressa. Somente por volta de 2007 
a técnica foi usada para criação de layouts CSS, e hoje em dia está amplamente 
difundida nesta área. 
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A figura 2.1 mostra dois exemplos de estruturas de grids. 
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Grid 7x7 - simples Grid 7x7 - com espaçamento 


Figura 2.1 - Grids. 


2.4 Como é criado um grid CSS 

A marcação HTML destinada a ser estilizada de forma a constituir um grid CSS 
é uma marcação modulada e padrão na qual os elementos que constituem a es- 
trutura do layout são definidos com uso de um atributo cujo valor é previamente 
definido e serve como seletor CSS para definir as células do grid, tais como definir 
células unitárias ou combinar células horizontais de modo a formar containers 
para o layout. 


2.4.1 Container geral 

Vamos examinar um exemplo prático bem simples de criação de grid com a fi- 
nalidade de entender o funcionamento básico das estruturas para grid. Observe 
a marcação HTML contendo uma folha de estilo incorporada mostrada a seguir. 


Dica: Nos exemplos deste livro, quando for o caso, usaremos folha de estilo 
incorporada com a finalidade de facilitar a leitura e o entendimento dos códigos. 
Você com certeza conhece e sabe quando, como e por que usar folhas de estilos 
externas. 


• HTML 

< ! DOCTYPE htnl> 
<htnl lang="pt-br"> 
<head> 
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<meta charset="utf-8"> 

<títle>Llvro Bootstrap Mau jor</title> 

<style> 

body { margin: 0; font: 100% sans-serif; } 
hl { font-size: 160%; } 

.Container { width: 940px; nargin: 0 auto; background: #b5b5b5; } 

</style> 

</head> 

<body> 

<div class="container"> 

<hl>Meu prineiro grid - Container gerai</hl> 

</div> <!-- /.Container --> 

</body> 

</html> 

[.../c2/grid-basico-1.html] 

A marcação HTML mostrada, estilizada conforme a folha de estilo nela incor- 
porada, cria um Container geral para um grid CSS fixo com largura de 940px 
centrado na tela. 

A renderização do arquivo anterior deve ficar conforme mostrado na figura 2.2. 



H ® livrobootstrap.localhostAodigos/cZ/grid-basico-l.html v C | | ^ Pesquisar [ ^ ^1 A ^ Ê ^ ©1“ w 


Meu primeiro grid - Container geral 


Figura 2.2 - Container para um grid básico. 


2.4.2 Linha de células 

Vamos criar uma linha de células para nosso grid. Para isso precisamos definir 
quantas células colocaremos em uma linha e qual será o espaçamento entre elas. 
Escolhemos colocar em cada linha doze células separadas por 20px. Fazendo uns 
cálculos simples, chegamos à conclusão de que cada célula deverá ter 60px de 
largura, totalizando 60 x 12 = 720px, com um total de espaços de 11 x 20 = 220px. 
Somando 720 + 220, obtemos os 940px do Container do layout, “fechando” as contas. 
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Vamos transformar essas premissas em marcação HTML e CSS. A linha de células 
será constituída pelo elemento div.row e cada uma das células por um elemento 
div.spanl. Observe a seguir o acréscimo de marcação no HTML mostrado ante- 
riormente. 

• HTML 

1. <div class="container"> 

2. <hl>Meu primeiro grid - Unha de células</hl> 

3. <div class="row"> 

4. <div class="spanl">l</div> 

5. <div class="spanl">2</div> 

6. <div class="spanl">3</div> 

7. 

8. <div class="spanl">ll</div> 

9. <div class="spanl">12</div> 

10. </div> <! -- /.row --> 

11. </div> <!-- /.Container --> 

[.../c2/grid-basico-2.html] 

Código comentado: 

Linha(s) Descrição 

Linhas 3 a 10 Elemento Container div com a classe cujo valor é row e que será o Con- 
tainer das células. A tradução da palavra inglesa “row” é linha. Esse 
Container é uma linha de células do grid. 

Linhas 4 a 9 Doze elementos div com a classe cujo valor é spanl são as doze células 
do grid. 

Para dispor uma linha contendo doze células, acrescentaremos na folha de estilos 
mostrada anteriormente as declarações em destaque no código a seguir. 

• CSS 

1. <style tyep="text/css"> 

2. body { margin: 0; font: 100% sans-serif; } 

3. hl { font-size: 160%; } 

4. .Container { 

5. width: 940px; 

6. nargin: 0 auto; 

7. background: #bSb5b5; 

8 . } 
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9. .row { nargin-left: -20px; } 

10. .spanl { 

11. width: 60px; 

12. float: left; 

13. nargin-left: 20px; 

14. background: #d5d5d5 

15. } 

16. .row:after { /* técnica noderna para clear floats */ 

17. content: 

18. display: table; 

19. Une-height: 0; 

20. clear: both; 


21 .} 

22. </style> 
Código comentado: 


Linha(s) Descrição 


Linha 9 
Linhas 11 
Linhas 12 

Linha 13 


Linha 14 
Linhas 16 a 21 


Ver explicação na linha 13. 

Define a largura de cada célula. 

Flutua as células à esquerda, tirando-as da sua posição vertical padrão 
e colocando-as em linha ao lado da outra. 

Define um espaçamento de 20px à esquerda para cada célula. Note que 
essa declaração fará com que a primeira célula da linha seja deslocada 
para a direita. Para recolocá-la em sua posição, declaramos uma margem 
negativa de 20px para o Container da linha, como mostrado na linha 

9. 

A cor de fundo #d5d5d5 visa apenas a facilitar a visualização do grid 
criando contraste com a cor do Container geral #b5b5b5 (ver linha 7). 
Uma vez que as células div. spanl foram flutuadas dentro do seu Con- 
tainer div.row, esse não se estende na vertical, assumindo altura zero. 
É o clássico comportamento de containers com floats. Para estender o 
Container, precisamos declarar regras CSS para fazer o conhecido clear 
floats. Nesse exemplo, adotamos a moderna técnica clear floats sem uso 
de marcação. 


A marcação HTML mostrada, estilizada conforme os acréscimos das regras CSS 
apresentadas, cria uma linha de doze células conforme a proposta de layout. 

A renderização do arquivo anterior deve ficar conforme mostrado na figura 2.3. 
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Meu primeiro grid - linha de células 
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Figura 2.3 - Grid básico, linha de células. 



2.4.3 Unindo células 

Aproxima funcionalidade que o sistema de grid proporciona, e que estudaremos 
a seguir, é a possibilidade de unir duas ou mais células adjacentes para formar 
colunas. Por exemplo: unindo-se sucessivamente quatro células adjacentes, po- 
demos criar uma linha composta de três colunas. 


Alerta: A partir daqui, vamos renomear o que até aqui chamamos de célula. 
Em grids CSS, as chamadas células, bem como o resultado da união de células 
adjacentes, denominam-se colunas. Assim, no exemplo mostrado na figura 2.3, 
temos 12 colunas. 


Vamos exemplificar a união de células do grid tomando como objetivo a criação 
de uma estrutura de layout de duas colunas. 

Uma coluna esquerda para o conteúdo principal e uma coluna direita para o con- 
teúdo auxiliar, tais como navegação, parceiros etc. É nossa intenção que a coluna 
principal ocupe 2/3 da largura total da aplicação (em nosso exemplo, 940px), e 
a coluna de navegação, 1/3 daquela largura. 

Observe os acréscimos e as modificações na marcação HTML. 

• HTML 

1. <div class="container"> 

2. <hl>Meu primeiro grid - criando colunas</hl> 

3. <div class=''row"> 

4. <div class="span8"xh2>Coluna principal</h2x/div> 

5. <div class="span4"xh2>Coluna auxiliar</h2x/div> 

[.../c2/grid-basico-3.html] 
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Código comentado: 

Linha(s) Descrição 

Linhas 3 e 10 Essas linhas definem o início e o final do Container das células de uma 
linha do grid. Note que os elementos-filhos desse Container são dois 
elementos div em lugar dos doze elementos div.spanl que tínhamos no 
exemplo anterior. 

Linhas 4 e 5 Os dois elementos div, na linha, criam as colunas principal e auxiliar. 

Note que o valor do atributo class desses div termina com um número 
(span8 e span4). Esses dois números somados resultam em 12. Como você 
já deve ter concluído, o número no valor do atributo define o número 
de células a serem combinadas para formar a coluna. 

O termo span em inglês, no presente contexto, pode ser traduzido para unir, abarcar 
ou abranger. Assim div.span8 deve ser lido como: um elemento div que une oito 
células do grid para criar o Container de uma coluna do layout. 

Para criar as duas colunas do layout, modificaremos e acrescentaremos na folha 
de estilos mostrada anteriormente as declarações em destaque no código a seguir. 

• css 

1. <style type="text/css"> 

2. body { margin : 0; font: 100% sans-serif; } 

3. hl { font-size: 160%; } 

4. .Container { 

5. width: 940px; 

6. margin: 0 auto; 

7. background: #b5b5b5; 

8 . } 

9. .row { margin - lef t : -20px; } 

10. .spanl { 

Mn width : 60px; 

12n float : left; 

13n margin -left : 20px; 

Mn background : #d5d5d5 

16. ,row:after { 

17. content: 

18. display: table; 

19. line-height: 0; 

20. clear : both; 

21 . } 
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22. [class*="span"] { 

23. float: left; 

24. margin-left: 20px; 

25. background: #d5d5d5 

26. } 

27. .span4 { width: 300px; } 

28. .span8 { width: 620px; } 

29. </style> 

Código comentado: 


Linha(s) Descrição 


Linhas 10 a 15 


Linhas 22 a 26 


Linha 27 


Linha 28 


A declaração da largura para cada seletor span* deverá ser feita em 
regra CSS separada, assim a regra CSS contida nessa linha que declara 
valores para o seletor spanl será substituída por outras regras mostradas 
a seguir. 

Os valores CSS comuns a todos os seletores do tipo span* são aqui de- 
clarados. O seletor [class*="span"] aplica-se a todos os elementos cujo 
valor do atributo class seja uma palavra que começa com span (vale 
para spanl, span2, span3, span4 etc.). 

Aqui se define a largura da coluna formada pela união de quatro célu- 
las. A largura é obtida somando-se as larguras das células (60px) com 
a largura dos espaçamentos entre elas (20px), ou seja, 4 x 60px + 3 x 
20px = 300px. 

Aqui se define a largura da coluna formada pela união de oito células. 
A largura é obtida somando-se as larguras das células (60px) com a 
largura dos espaçamentos entre elas (20px), ou seja, 8 x 60px + 7 x 
20px = 620px. 


A marcação HTML mostrada, estilizada conforme os acréscimos e as modificações 
nas regras CSS mostradas, cria as duas colunas conforme proposto anteriormente. 

A renderização do arquivo anterior deve ficar conforme mostrado na figura 2.4. 



Livro Bootstrap Maujor 
*■ ■ * Iivrobootstrap.localhost'codigos/c2/grid-basico-3.html 
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Meu primeiro grid - criando colunas 


Coluna principal 

Coluna auxiliar 


Figura 2.4 - Grid básico, criando colunas. 
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Para contemplar todas as possibilidades de combinação de união de células, a 
folha de estilos do grid deverá conter as seguintes declarações CSS: 

• CSS 


spanl 

{ 

width 

60px; 





span2 

{ 

width 

140px; 

}/* 

2x60 + 

1x20 

*1 

span3 

{ 

width 

220px; 

}/* 

3x60 + 

2x20 

*/ 

span4 

{ 

width 

300px; 

}/* 

4x60 + 

3x20 

*1 

spanS 

{ 

width 

380px; 

}/* 

5x60 + 

4x20 

*/ 

span6 

{ 

width 

460px; 

}/* 

6x60 + 

5x20 

*/ 

span7 

{ 

width 

540px; 

}/* 

7x60 + 

6x20 

*/ 

span8 

{ 

width 

620px; 

}/* 

8x60 + 

7x20 

*/ 

span9 

{ 

width 

700px; 

}/* 

9x60 + 

8x20 

*/ 

spanlG 

{ 

width 

780px; 

}/* 

10x60 

9x2C 

*/ 

spanll 

{ 

width 

860px; 

}/* 

11x60 

10x20 */ 

spanl2 

{ 

width 

940px; 

}/* 

12x60 

11x20 */ 


2.4.4 Criando um rodapé 

Para criar um rodapé em nosso sistema de grid básico, basta declarar na marcação 
HTML uma nova linha div. row que se estenda por toda a largura do Container do 
grid div. Container. O acréscimo de marcação HTML e de regra CSS é mostrado, 
em destaque, a seguir. 

• HTML 

1. <div ciass="container"> 

2. <hl>Meu primeiro grid - criando rodapé</hl> 

3. <div ciass="row"> 

4. <div ciass= l, span8''><h2>CoÍjna principal</h2></div> 

5. <div ciass= l 'span4''xh2>Coiuna auxiliar</h2></div> 

10. </div> <!-- /.row das colunas --> 

11. <div class="row"> 

12. <div class="spanl2"xh2>Rodapé</h2x/div> 

13. </div> <!-- /.row do rodapé --> 

14. </div> <!-- /.Container --> 

[.../c2/grid-basico-4.html] 
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,spanl2 { width: 940px; background: #eSe5e5; } /* Acréscimo na folha de estilo anterior 
*/ 


Alerta: No arquivo para esse exemplo define-se uma cor de fundo para a linha do 
rodapé com a finalidade de destacar visualmente sua posição. 


A renderização do arquivo anterior deve ficar conforme mostrado na figura 2.5. 



Figura 2.5 - Grid básico, criando rodapé. 


2.4.5 Aninhando conteúdos 

Outra funcionalidade do sistema de grids para layout é a possibilidade de ani- 
nhar colunas dentro de colunas. Suponha que desejamos criar dentro da coluna 
principal três blocos de conteúdos em linha, ou seja, na horizontal. O acréscimo 
de marcação HTML e de regra CSS é mostrado a seguir. 

• HTML 

1. <div class="container"> 

2. <hl>Meu primeiro grid - aninhamento de colunas</hl> 

3. <div class=''row"> 

4. <div class="span8"> 

<h2>Coluna principal</h2> 

<div class="row"> 

<div class="span2" style="background: #f5fSf5;"> 

<p>Conteúdo aninhado á esquerda</px/div> 

<div class="span3" style="background: #f5fSf5;"> 

<p>Conteúdo aninhado no centro</px/div> 

<div class="span3" style="background: #f5f5f5; "> 


Conheça os livros do Maujor: http://livrosdomaujor.com.br 


48 


Boostrap 3.3.5 


<p>Conteúdo aninhado à direita</px/div> 
</div> <!-- .row dos conteúdos aninhados- -> 

</div> <!-- / . span8 coluna principal --> 

5. <div class="span4"xh2>Coluna auxiliar</h2x/div> 

[.../c2/grid-basico-5.html] 

• CSS 

.span2 { width: 140px; } /* Acréscimo na folha de estilo anterior */ 
.span3 { width: 220px; } /* Acréscimo na folha de estilo anterior */ 


Alerta: No arquivo para esse exemplo define-se uma cor de fundo, com CSS inline, 
para os conteúdos aninhados, somente com a finalidade de destacar visualmente 
sua posição. 


A renderização do arquivo anterior deve ficar conforme mostrado na figura 2.6. 



Figura 2.6 - Grid básico, aninhamento de conteúdos. 

Note que, sendo o Container dos três blocos de conteúdos a coluna principal que 
é formada pela união de oito células, temos disponível, para criar os blocos, estas 
oito células. Por essa razão, optamos, em nosso exemplo, pelo primeiro bloco, que 
foi resultado da união de duas células, e o segundo e o terceiro, de três células. 

Assim, cabe a pergunta: e se precisarmos de três blocos com larguras iguais? 
Com oito células disponíveis, temos duas possibilidades para múltiplos de três: 
unir seis células duas a duas e distribuir as duas células restantes entre as três 
ou tomar uma célula três vezes distribuindo as cinco células restantes entre elas. 

Em ambos os casos, teríamos que criar regras CSS personalizadas. 
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Conforme foi visto, os conceitos da construção de layouts baseados em sistema 
de grid se fundamentam em uma marcação HTML com sua estrutura geral 
padronizada, na qual os nomes dos atributos class são predeffnidos e servem 
de referência para estabelecer regras CSS destinadas a posicionar e formatar os 
diferentes elementos do layout. 

Você deve estar se perguntando: O layout é todo construído com elementos div? 
E a semântica? A resposta é: desde que você preserve os atributos e seus valores 
predefinidos, use o elemento que você quiser em substituição ao elemento div. 
Mas lembre-se de que os elementos substitutos devem ser declarados no nível de 
bloco, como são os elementos div substituídos. 

Observe o arquivo constante do item [2.4.7] reescrito de forma semântica: 

• HTML 


1. 

<div class="container"> 


2. 

<header> 


3. 

<hl>Meu primeiro grid - senântica</hl> 


4. 

</header> 


5. 

<div class="row"> 


6. 

«section class="span8"> 


7. 

<header> 


8. 

<h2>Coluna principal</h2> 


9. 

</header> 


10. 

<div class="row"> 


11. 

<div class="span2" style="background: 

#f 5f 5f 5 ; 


<p>Conteúdo aninhado á esquerda</p 

></div> 

12. 

<div class="span3" style="background: 

#f 5f 5f 5 ; 


<p>Conteúdo aninhado no centro</p></div> 

13. 

<div class="span3" style="background: 

#f 5f 5f 5 ; 


<p>Conteúdo aninhado à direita</p></div> 

14. 

</div> <!-- .row dos conteúdos aninhados- 

-> 

15. 

</section> <!-- / . span8 coluna principal --> 


16. 

<aside class="span4"xh2>Coluna auxiliar</h2x/aside> 

17. 

</div> <!-- /.row das colunas --> 


CO 

T — 1 

<div class="row"> 


19. 

<footer class="spanl2"xh2>Rodapé</h2></footer> 


20. 

</div> <!-- /.row do rodapé --> 


21. 

</div> <!-- /.Container --> 



[.../c2/grid-basico-6.html] 
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O fato é que em projetos complexos a solução semântica proposta neste simples 
exemplo será inviável, e a verdade é que autores têm procurado solucionar este 
problema propondo algumas alternativas, tais como a criação de nomes de classes 
semânticos a serem processados por SASS ou LESS e outras, mas não existe uma 
solução semântica a toda prova, e este é um problema ainda não solucionado, 
comum à grande maioria dos frameworks CSS. 

As versões anteriores ao IE9 do Internet Explorer não reconhecem os novos 
elementos da HTML5, por isso é necessário usar um script para forçar aqueles 
navegadores a reconhecer e estilizar tais elementos. Quando for o caso, nos exem- 
plos deste livro, lincaremos para um script SHIM hospedado no CDN do Google, 
como mostrado no código a seguir. 

<head> 

<! - - [if lt IE 9]> 

«script src=" http://htnl5shin.googlecode.con/svn/trunk/htnl5. js"></script> 

<! [endif ] - -> 

</head> 


Dica: Existem outros Scripts que cumprem a mesma função, tal como o Modernizr. 
Use o de sua preferência e conforme as suas necessidades. 


2.4.7 Espaçando colunas 

No grid do nosso exemplo, tal como no Bootstrap, o espaçamento-padrão entre co- 
lunas é de 20px, contudo existe uma funcionalidade que permite ao autor aumentar 
esse espaçamento, fazendo com que uma ou mais colunas sejam incorporadas para 
definir o espaçamento. Por exemplo: considerando as doze colunas iniciais do grid, 
é possível construir uma coluna à esquerda com sete células e outra à direita com 
três células e com um espaçamento entre elas de — 12 - (3 + 7) = 2 — duas células 
(180px). Na figura 2.7, há o diagrama que ilustra essa configuração. 
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Quando usamos colunas para obter espaçamento, em ambas as extremidades do 
espaçamento é adicionado o espaçamento-padrão de 20px, daí, em nosso exemplo, 
no qual usamos duas colunas para espaçar, temos um espaçamento total de 2x60 
+ 3x20 = 180px, como mostrado na figura 2.7. Por outro lado, a união de colunas 
para formar uma coluna de largura maior não inclui os espaçamentos-padrão 
nas extremidades. 

A marcação HTML e as regras de estilo específicas para criar o layout proposto 
no diagrama são mostradas a seguir. 

• HTML 

< ! DOCTYPE htnl> 

<htnl lang="pt-br"> 

<head> 

<meta charset="utf-8"> 

<title>Livro Bootstrap Maujor</title> 

<style type="text/css"> 

/* regras de estilo conforme exemplos anteriores */ 

,span3 { width: 220px; } 

.span7 { width: 540px; } 

.offset2 { margin-left: 180px; } /* classe define largura do espaçamento */ 

</style> 

</head> 

<body> 

<div class="container"> 

<hl>Bootstrap - espaçando colunas</hl> 

<div class="row"> 

<div class="span7"> 

<h2>Coluna principal</h2> 

</div> <!-- ,span7 --> 

<div class="span3 offset2"> 

<h2>Coluna auxiliar</h2> 

</div> <!-- ,span3 --> 

</div>< ! - - /. row --> 

</div> <!-- /.Container --> 

</body> 

</html> 

[.../c2/espacando-colunas.html] 
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A renderização do arquivo anterior deve ficar conforme mostrado na figura 2.8. 



' Livro Bootstrap Mauji 

livrobootstrap.localhost íodigos/c2/ espacando-colunas.html 


Cj | ^ Pesquisar | 4 4 A & Ê ® | = ® T 


Bootstrap - espaçando colunas 


Coluna principal 


Coluna auxiliar 


Figura 2.8 - Espaçando colunas. 

Para unir colunas do grid e transformá-las em espaçamentos, o nosso exemplo 
definine o valor offset* para o atributo class. Esse valor termina com um número 
que define o número de colunas a unir para criar o espaçamento. Dessa forma, 
off set3 une três colunas, off set7 une sete colunas, e assim por diante. As regras CSS 
que se aplicam a esses valores de classe são mostradas a seguir. 


• CSS 


.offsetl 

,offset2 

,offset3 

,offset4 

,offset5 

,offset6 

,offset7 

,offset8 

,offset9 

.offsetlG 

.offsetll 


{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 
{ nargin-left 


100px; } 
180px; } 
260px; } 
340px; } 
420px; } 
500px; } 
580px; } 
660px; } 
740px; } 
820px; } 
900px; } 


Note que o espaçamento é definido atribuindo-se uma margem esquerda para 
a coluna. Assim, devemos declarar o valor offset* para o atributo class contido 
no elemento que cria a coluna à direita do espaçamento. Em nosso exemplo, o 
elemento div que cria a coluna auxiliar. 


2.5 Grid fluido 

Todos os exemplos mostrados até aqui foram criados de modo a obter um grid 
fixo com 940px de largura centrado na tela. Para obter um grid fluido basta de- 
clarar os valores das larguras em porcentagens. 
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2.6 Grid responsivo 

Para obter um grid responsivo basta declarar uma metatag apropriada e criar 
regras CSS com uso das media queries. 


2.7 Conclusão 

Neste capítulo, estudamos os fundamentos de criação e funcionamento de grids 
CSS. O Bootstrap é um grid CSS bem mais complexo que o mostrado neste capí- 
tulo, mais os princípios aqui mostrados são válidos para o entendimento do seu 
funcionamento estrutural. 
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Neste capítulo estudaremos os padrões básicos de estilização adotados pelo Boots- 
trap. Examinaremos as regras CSS padrão para o grid do Bootstrap, tipografia, có- 
digos e blocos de códigos. Veremos com detalhes as diferentes formas de estilização 
de tabelas, as funcionalidades CSS para apresentação de formulários, a coleção de 
botões pré-estilizados e prontos para uso na interface a projetar. Estudaremos os 
três tipos de estilização para apresentação de imagens e para finalizar o capítulo 
veremos quais são e como utilizar os ícones padrão fornecidos pelo Bootstrap. 


3.1 Grid 

O grid é a espinha dorsal de qualquer framework CSS. E ele que determina o 
posicionamento de cada elemento em uma página, sendo assim usado para cons- 
truir o layout. Um sólido conhecimento das marcações HTMLpadrão disponíveis 
para estruturar layout é o primeiro requisito para se aprender a usar o Bootstrap. 
Ao construir um layout, por mais complexo que ele seja, é necessário saber quais 
são os elementos, classes, atributos e estruturas de marcação do grid usar. E, tão 
importante e fundamental quanto os elementos HTML são os atributos a serem 
declarados na marcação, pois são eles que servirão de referência para que a folha 
de estilo padrão do Bootstrap aplique as regras CSS previstas para criar os dife- 
rentes componentes e widgets padrões do Bootstrap. 

Portanto, desde já, a exemplo do que estudamos no capítulo 1, esteja ciente de 
que um sistema de grids se baseia em marcação predefinida e nomes de atributos, 
notadamente o atributo class também predefinidos . 
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3.1.1 Introdução 

Uma aplicação desenvolvida com Bootstrap deve estar em conformidade com 
algumas premissas mandatórias conforme descritas a seguir. 

• Estar contida em um elemento div Container geral que recebe a classe de 
nome Container conforme mostrado a seguir. 


<body> 

<div class="container"> 

<!-- Aplicação criada con Bootstrap --> 

</div> <!-- /.Container --> 

<body> 

<html> 

Opcionalmente, para obter um layout fluido (layout que preencha toda a largura 
da tela) o nome de classe Container deve ser substituído por Container -fluid. Não se 
preocupe com este nome, adiante neste livro, veremos como usar e quais são os 
efeitos de se usar, alternativamente, este nome. 


3.1.2 Breakpoints 

As CSS do Bootstrap foram desenvolvidas seguindo as premissas da filosofia 
“mobile first”. Isto significa que as regras de estilo iniciais foram criadas para 
contemplar um layout de uma coluna no qual os blocos de conteúdos vão sendo 
posicionados na vertical um após outro e suas larguras ocupam todo o espaço 
disponível em dispositivos móveis, com viewports de largura menor do que 768px. 

Para fins didáticos denominaremos, neste livro, as regras CSS para dispositivos 
com viewport menor do que 768px de regras CSS iniciais. Os criadores do Bootstrap 
estabeleceram que por padrão o primeiro breakpoint fosse em 768px. 

A partir da largura de viewport igual a 768px, usando-se media queries foi criado 
um conjunto de regras CSS a serem aplicadas juntamente com as regras CSS iniciais. 

Os criadores do Bootstrap estabeleceram que por padrão o segundo breakpoint 
fosse em 992px e usando-se media queries foi criado um conjunto de regras CSS 
a serem aplicadas juntamente com as regras CSS anteriores. 
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Os criadores do Bootstrap estabeleceram que por padrão o terceiro breakpoint 
fosse em 1200px e usando-se media queries foi criado um conjunto de regras 
CSS a serem aplicadas juntamente com as regras CSS anteriores para larguras de 
viewport maiores do que 1200px. 

Assim, em um layout criado com uso do Bootstrap, por padrão, é possível que se 
defina até quatro acomodações do layout de acordo com a largura da viewport. Em 
design responsivo há um princípio que diz que quem determina os breakpoints 
é o layout e não a largura dos dispositivos. Assim sendo não se deve estabelecer 
breakpoints “a priori”. 

O Bootstrap estabelece quatro breakpoints e na maioria dos casos eles atenderão 
seu layout. Se ajustes forem necessários com mudança, ou mesmo criação de novos 
breakpoints o autor poderá criar regras de estilo complementares ou mesmo usar 
LESS do Bootstrap para processar uma nova folha de estilo personalizada. Neste livro 
vamos desenvolver nossos exemplos considerando os quatro breakpoints mostrados. 

Para cada faixa de comportamento do layout de acordo com os breakpoints 
está prevista uma largura máxima para o Container geral da aplicação conforme 
mostrado a seguir. 

• Até 768px a largura terá o valor CSS auto. 

• Entre 768px e 992px a largura máxima é igual a 750px. 

• Entre 992px e 1200px a largura máxima é igual a 970px. 

• Acima de 1200px a largura máxima é igual a 1170px. 


3.1.3 Linhas do grid 

Criam-se linhas do grid com um elemento div que recebe a classe de nome row 
conforme mostrado a seguir, para criar duas linhas. 

<div class="container"> 

<div class="row"> <!-- Linha --> 

<!-- Colunas --> 

</div> <!-- /.row --> 

<div class="row"> <!-- Linha --> 

<!-- Colunas --> 

</div> <!-- /.row --> 

/div> <!-- /. Container --> 
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• Dentro do elemento div que cria uma linha (div.row) insere-se como 
elemento-filho elementos para criar colunas. Colunas, formadas por cé- 
lulas ou constituída de uma célula somente, são criadas com uso de um 
elemento div que recebe um ou mais atributos e cujo atributo classe tem 
valor cujo formato geral é col-xs-*, col-sn-*, col-nd-* e col-lg-*, sendo o sinal 

• um número de 1 a 12 que define a quantidade de células que formam a 
coluna. O número 12 é, por padrão, o número máximo de colunas em uma 
linha. É possível unir células (cada uma das 12 colunas de uma linha) com 
a finalidade de se obter colunas com largura maior. Uma linha pode conter 
qualquer combinação de colunas desde que o número máximo de células 
não ultrapasse a 12, podendo ser menor. A finalidade de cada um dos valores 
de classe para os div containers das células é conforme explicado a seguir. 

• col-xs-* - Telefones ; define colunas para dispositivos com viewport extra 
pequena (menor que 768px). 

• col-sn-* - Tablets ; define colunas para dispositivos com viewport pequena 
(de 768px até 991px). 

• col-nd-* - Desktop médio ; define colunas para dispositivos com viewport 
média (de 991 px até 1199px). 

• col-lg-* - Desktop largo; define colunas para dispositivos com viewport 
larga (maior que 1199px). 

Se for definido para uma linha um número de colunas cuja soma total de células 
ultrapasse a 12, cada grupo de colunas a mais será posicionado a seguir no fluxo, 
tal como, se houvesse uma “quebra de linha”. 

Caso contrário, se for definido para uma linha um número de colunas cuja soma 
total de células seja menor do que 12, o grupo de células em falta será posicionado 
à direita e não receberá conteúdos. 


3.1.4 Colunas dogrid 

Conhecendo quais são os breakpoints padrão do Bootstrap vamos examinar 
novamente os valores de classes para definir colunas, mostrados no item anterior. 
Cada uma das quatro classes mostradas se destina a aplicar, as regras de estilo 
previstas para um breakpoint, no elemento ao qual ela classe for definida. 
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3.1 .4.1 Fundamentos 

O entendimento das premissas relacionadas a seguir é fundamental para uma perfeita 
compreensão e consequentemente uso correto e apropriado das classes destinadas à 
criação de colunas. Conforme mostrado anteriormente os valores do atributo classe 
do Container das colunas são os seguintes: col-xs-*, col-sn-*, col-nd-*, col-lg-*. 

• Quaisquer que sejam os valores de classe definidos para um Container 
de colunas, quando a largura da viewport for menor do que768px serão 
aplicadas, no Container, as regras de estilo iniciais. 

• Se não for definido um valor de classe para o Container da coluna as regras 
de estilo aplicadas ao Container serão as regras de estilo iniciais, ou seja, 
aquelas para viewport menor do que 768px (mobile- first) e o layout terá 
comportamento mobile em todas as larguras de viewport. Então, para que 
serve col-xs-*? Para sobrescrever o comportamento colunar em viewport 
menor do que 768px, permitindo, por exemplo, que se crie um layout de 
duas, ou mais colunas em larguras de viewport menores do que 768px. 

• Se for definido somente o valor col-sn-* o Container terá o comportamento 
colunar em larguras de viewport menores que 768px e outro em maiores. 

• Se for definido somente o valor col-nd-* o layout terá o comportamento 
colunar em larguras de viewport menores que 992px e outro em maiores. 

• Se for definido somente o valor col-lg-* o layout terá o comportamento 
colunar em larguras de viewport menores que 1200px e outro em maiores. 

• O efeito de se definir dois ou mais valores de classe faz com que o compor- 
tamento do layout varie de acordo com os valores de classe definidos e os 
respectivos breakpoints. 

Vejamos alguns exemplos práticos que ilustram a criação de colunas em diferentes 
situações. 

Exemplo 7 

• CSS - Coloca uma cor de fundo e uma borda nas colunas com a finalidade de 

facilitar a visualização. 

.row div[class A ="col- " ] { 
background: #fafafa; 
bordenlpx solid #ccc; 

} 
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<div class="container"> 

<div class="row"> 

<div class="col-nd-l">.col-nd-l</div> 

<div class="col-nd-l">.col-nd-l</div> 

<!- repete 9 vezes --> 

<div class="col-nd-l">.col-nd-l</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-8">. col-nd -8</div> 

<div class="col-nd-4">.col-md-4</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-4">.col-md-4</div> 

<div class="col-nd-4">.col-md-4</div> 

<div class="col-nd-4">.col-md-4</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-6">.col-md-6</div> 

<div class="col-nd-6">.col-md-6</div> 

</div> <!-- /.row --> 

</div> <!-- /.Container --> 

[.../c3/classes-para-criar-colunas.html] 

Neste exemplo usou-se o valor de classe col-nd-* para obter um layout destinado 
a dispositivos móveis (telefones e tablets) em viewport abaixo de 992px e outro 
para desktop em viewport acima de 992px. 

Observe na figura 3.1 o resultado da aplicação da classe col-nd-* em diferentes 
larguras de viewport. Mostramos na figura a largura máxima padrão definida 
pelo Bootstrap para o Container geral da aplicação (div. Container) para diferentes 
larguras de viewport. 
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VIEWPORT >1200px 
— max-width: 1170px — 


col-md -1 col-md -1 col-md -1 col-md -1 col-md -1 .col-md -1 

| col-md-4 

| col-md-4 


.col-md-4 


VIEWPORT >992 e <1200px 
max-width: 970px 


col- 

md -1 

col-md-8 

col-md-4 

xol-md-6 


col- 

md -1 


col- 

md -1 


col- 

md -1 

col-md-4 


VIEWPORT >768px e <992px 
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col-md-l 

.col-md -1 

col-md -1 

col-md -1 

col-md -1 

col-md-1 

col-md -1 

.col-md -1 

col-md -1 

col-md -1 

col-md-1 
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.col-md-8 

col-md-4 


col-md-4 

col-md-4 

.col-md-4 

col-md-6 

col-md-6 


Figura 3.1 - Classes para criar colunas. 

Esse exemplo prático demostra a aplicação de classe para criação de colunas e 
encontra-se disponível para consulta online. 


3.1 .4.2 Número máximo de colunas em uma linha 

Sabemos que o número máximo de células em uma linha é 12 e já dissemos que 
se um número maior de células for declarado para uma linha, as células a mais 
serão posicionadas abaixo como se existisse uma “quebra de linha”. No exemplo a 
seguir mostramos a marcação para uma linha que comprova este comportamento. 

• css 

.row div[class A ="col-"] { 
background: #fafafa; 
bordenlpx soüd #ccc; 

} 

.row { border: 2px dotted black; } 
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<div class="container"> 

<div class="row"> 

<div class="col-xs-6">6</div> 
<div class="col-xs-4">4</div> 
<div class="col-xs-5">5</div> 
<div class="col-xs-3">3</div> 
<div class="col-xs-7">7</div> 
</div> 

</div> <!-- /.Container --> 


[.../c3/numero-maximo-colunas-em-linha.html] 

Neste exemplo definiu-se uma linha com um número total de células igual a 25 
células. 

Foi incorporada ao documento uma folha de estilo adicional para aplicar cor de 
fundo e borda em cada coluna e uma borda pontilhada na linha com a finalidade de 
facilitar a visualização do resultado. Observe na figura 3.2 a renderização da linha. 


6 4 

5 3 

7 


Figura 3.2 - Número máximo de colunas em uma linha. 

Notar que a soma das células das três primeiras colunas é 6+4+5 = 15 > 12. Assim 
as duas primeiras colunas 6+4=10<12 são acomodadas e a terceira coluna vai 
para baixo. 

A soma células das três últimas colunas é 5+3+7 = 15 > 12 e o processo se repete. 

Notar que o espaço que “sobra” em cada fileira é igual ao número de células que 
faltam para completar 12 na fileira. 

Esse exemplo prático demostra o comportamento das colunas quando se declara 
mais de 12 colunas em uma linha e encontra-se disponível para consulta online. 
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3.1 .4.3 Espaçando colunas 

O Bootstrap prevê valores para o atributo classe do tipo col-xs-offset-*, 
col-sn-offset-*, col-md-offset-*, col-lg-offset-* nos quais o sinal * é um número inteiro 
de 1 a 11. Estes valores se destinam a criar um espaçamento à esquerda da coluna. 
O número de células que define a largura do espaçamento é computado na soma 
do total de células que cabem em uma linha, que como já vimos é 12. Observe o 
exemplo a seguir que mostra o espaçamento entre colunas em três linhas diferentes. 

• css 

.row div[class A ="col-"] { 
background: #fafafa; 
border:lpx solid #ccc; 

} 

.row { nargin-bottom: 5px; } /* separa linhas para facilitar visualização */ 

• HTML 

<div class="container"> 

<div class="row"> 

<div class="col-nd-3">3</div> 

<div class="col-nd-2 col-md-offset-3">2</div> 

<div class="col-nd-l col-md-offset-3">l</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-5 col-md-offset-2">5</div> 

<div class="col-nd-3 col-md-offset-1 ">3</div> 

</ div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-8 col-md-offset-2">8</div> 

</div> <!-- /.row --> 

</div> <!-- /.Container --> 

[.../c3/espacando-colunas.html] 

Neste exemplo as três linhas foram definidas com espaçamento entre colunas 
conforme descrito a seguir. 

Na primeira linha temos uma coluna com três células a seguir uma coluna com 
duas células com um espaçamento de três células à esquerda e a seguir uma 
coluna com uma célula com um espaçamento de três células à esquerda. A soma 
total de células é 12. 
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Na segunda linha temos uma coluna com cinco células com um espaçamento 
de duas células à esquerda, a seguir uma coluna com quatro células com um 
espaçamento de uma célula à esquerda. A soma total de células é 12. 

Na terceira linha temos uma coluna com oito células com um espaçamento de 
duas células à esquerda perfazendo um total de 11 células na linha. Notar que o 
espaço de uma célula que falta para totalizar as 12 células na linha é posicionado 
a direita na linha. 

Foi incorporada ao documento uma folha de estilo adicional para aplicar cor de 
fundo e borda em cada coluna e uma margem entre linhas com a finalidade de 
facilitar a visualização do resultado. Observe na figura 33 mos a renderização 
dos espaçamentos nas três linha. 


3 

espaço de 3 células 


2 

espaço de 3 células ^ 

espaço de 2 células 

5 


espaço de 

1 célula 

4 

espaço de 2 células 


8 


"sobra" 

espaço de 2 células 


Figura 3.3 - Espaçando colunas. 

Esse exemplo prático demostra como criar espaçamento entre colunas e encontra- 
-se disponível para consulta online. 

3.1 .4.4 Aninhando colunas 

É válido aninhar colunas em tantos níveis quando se queira. Para aninhar colunas 
basta que se crie linhas dentro de colunas existentes. Neste caso as linhas criadas 
conterão colunas aninhadas na coluna onde a linha foi criada. No exemplo a se- 
guir em uma linha com duas colunas, uma com oito células e outra com quatro 
células aninhou-se na primeira coluna uma linha com 3 células e na segunda 
uma com duas células. 

• CSS 

.row div[class A ="col- " ] { 
background: #fafafa; 
borderilpx solíd #ccc; 
font-size: 30px; 
font-weight: bold; 
padding-top: 10px; 
padding-botton: 10px; 
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} 

.row .row > div[class A ="col-"] { 
background: #f lflfl; 
border:lpx solid #black; 
font-size: 20px; 
font-weight: bold; 

} 

• HTML 

<div class="container"> 

<div class="row"> 

<div class="col-nd-8"> 


<div class="row"> 

<div class="col-md-2">2</div> 

<div cl.ass="col-md-7">7</div> 

<div class="col-nd-3">3</div> 

</div> <! -- /.row --> 

</div> 

<div class="col-nd-4"> 

4 

<div class="row"> 

<div cl.ass="col-md-6">6</div> 

<div class="col-nd-6">6</div> 

</div> <! -- /.row --> 

</div> 

</div> <!-- /.row --> 

</div> <!-- /.Container --> 

[.../c3/aninhando-colunas.html] 

Neste exemplo as três linhas foram definidas com espaçamento entre colunas. 

Foi incorporada ao documento uma folha de estilo adicional para aplicar cor de 
fundo e borda em cada coluna com a finalidade de facilitar a visualização do 
resultado. 

Observe na figura 3.4 a renderização das colunas aninhadas. 

Esse exemplo prático demostra como aninhar colunas e encontra-se disponível 
para consulta online. 
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Figura 3.4 -Aninhando colunas. 


Dica: Notar que para o grid do Bootstrap o aninhamento de colunas se faz de 
modo a que o número máximo de colunas aninhadas seja sempre igual a doze, 
independentemente do nível de aninhamento, pois a largura das células é definida 
em porcentagem. 


3.1 .4.5 Ordenando colunas 

O Bootstrap prevê os valores de classe col-xs-push-*, col-sn-push-*, col-nd-push-*, 
col-lg-push-* que se destinam a “empurrar” a coluna para a direita e os valores 
col-xs-pull-*, col-sn-pull-*, col-nd-pull-*, col-lg-pull-* que se destinam a “puxar” 
a coluna para a esquerda fazendo com que elas troquem de posição, ou seja, 
alterando sua ordem. Observe o exemplo mostrado a seguir que esclarece o uso 
destas classes. 

• CSS 

.row div[class A ="col-"] { 
background: #fafafa; 
border:lpx soüd #ccc; 
font-size: 30px; 
font-weight: bold; 
padding : 10px 0; 

} 

• HTML 

<div class=''container"> 

<div class="row"> 

<div class="col-nd-5 col-nd-push-7">5</div> 

<div class="col-nd-7 col-nd-pull-5">7</div> 

</div> <!-- /.row --> 

</div> <!-- /.Container --> 

[.../c3/ordenando-colunas.html] 
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Neste exemplo, na marcação HTML, a coluna 5 está à esquerda e a coluna 7 à 
direita e na renderização há troca das posições. 

Esse exemplo prático demostra como ordenar colunas e encontra-se disponível 
para consulta online. 


3.1.5 Container fluido 

Vimos no item anterior que para cada faixa de largura de viewport foi estabelecida 
uma largura máxima para o Container geral da aplicação. Este comportamento 
pode ser alterado de modo a que em qualquer largura de viewport o layout se 
comporte como fluido, ou seja, expanda para ocupar toda a largura disponível. 
Para isso basta que o valor da classe do elemento div Container geral seja alterado 
de Container para Container -fluid como mostrado a seguir. 

• HTML 

<div class=" container container-fluid"> 

<!-- igual ao exenplo nostrado na figura 3.1 --> 

</div> <!-- /. Container -fluid --> 

[.../c3/container-fluido.html] 

Neste exemplo mostramos como alterar o exemplo mostrado na figura 3.1 para 
que se comporte como layout fluido. 

Esse exemplo prático demostra como tornar o layout fluido e encontra-se dispo- 
nível para consulta online. 

E válido usar-se os dois tipos de Container (.Container e .Container -fluid) em uma 
mesma página. Um exemplo comum é aquele no qual o site adota uma faixa 
que sempre se estende por toda a largura da viewport (faixa fluída) para o topo 
e outra para o rodapé enquanto os conteúdos, em telas maiores, são renderizados 
em uma largura menor que a da viewport e centralizados na tela. 

A marcação HTML mostrada a seguir esclarece a estrutura geral para esta situação. 

• HTML 

<header class="container-fluid">TOPO</header> 

<nain class="container">CONTEÚDOS</nain> 

<footer class="container-fluid"></footer> 
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3.2 Tipografia 

Antes de começar a desenvolver layouts, é necessário aprofundar os conhecimentos 
que já adquirimos nos capítulos anteriores, com a finalidade de conhecer e saber 
usar as poderosas ferramentas que temos em mãos quando optamos pelo uso do 
Bootstrap. Vamos falar de estilização dos elementos tipográficos de uma aplicação 
web. Servirá de base para nossos estudos de estilização, o arquivo bootstrap.css. 


Alerta: Os valores das propriedades CSS mostrados neste capítulo são valores 
padrão do Bootstrap. Caso alguns, ou muitos, desses valores não seja o mais 
indicado para o seu projeto, não se preocupe, pois você não precisará editar 
e alterar manualmente a folha de estilo. Você poderá baixar uma versão 
personalizada da folha de estilo em http://getbootstrap.com/customize/. 


3.2.1 Estilização do elemento body 

As declarações CSS para o elemento body são mostradas a seguir. 

• CSS 

body { 
nargin: 0; 

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 

font-size: 14px; 

line-height: 1.42857143; 

color: #333; 

background-color: #fff; 

} 

A família de fontes para todos os conteúdos textuais dos elementos do Bootstrap, 
exceto para os elementos code, kbd, pre e sanple é definida no seletor body. 

O tamanho de fonte padrão é 14px com a propriedade line-height definida em 
1.42857143 que para um tamanho de fonte de 14px resulta em 1.42857143 x 14 = 
20px. A cor dos textos é a preta e do fundo a branca. 
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3.2.2 Estilização dos elementos hl - h6 

Os tamanhos de fonte para os níveis de cabeçalhos são conforme mostrados a 
seguir. 

hl, .hl { font-size: 36px; } 
h2, .h2 { font-size: 30px; } 
h3, ,h3 { font-size: 24px; } 
h4, .h4 { font-size: 18px; } 
h5, .h5 { font-size: 14px; } 
h6, .h6 { font-size: 12px; } 

Notar que está prevista uma classe com o nome igual ao nome da tag de cabeçalho 
e se destina a uso geral. 

O elemento snall quando usado dentro de um elemento de cabeçalho recebe 
uma estilização especial em cor cinza clara e tamanho de fonte 80% do tamanho 
de fonte do cabeçalho. Opcionalmente pode-se usar a classe small para obter o 
mesmo efeito. 

O exemplo mostrado a seguir esclarece esta estilização para cabeçalhos. 

• HTML 

<div class="container"> 

<div class=''row"> 

<div class="col-nd-12"> 

<hl>hl - Cabeçalho nivel 1 <small>Texto small</snall></hl> 

<h2>h2 - Cabeçalho nivel 2 <snall>Texto snall</snall></h2> 

<h3>h3 - Cabeçalho nivel 3 <small>Texto snall</snall></h3> 

<h4>h4 - Cabeçalho nivel 4 <snall>Texto small</snall></h4> 

<h5>h5 - Cabeçalho nivel 5 <snall>Texto small</snall></h5> 

<h6>h6 - Cabeçalho nivel 6 <snall>Texto small</snall></h6> 

</div> 

</div> <!-- /.row --> 

</div> <!-- /.Container --> 

[.../c3/estilização-de-cabecalhos.html] 

Observe na figura 3.5 o resultado da aplicação da estilização padrão em elementos 
de cabeçalho, bem como o efeito do elemento snall. 
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hl - Cabeçalho nível 1 Texto small 

h2 - Cabeçalho nível 2 Texto small 

h3 - Cabeçalho nível 3 Texto small 

h4 - Cabeçalho nível 4 Texto smaii 
h5 - Cabeçalho nível 5 Texto small 
h6 - Cabeçalho nível 6 Texto sma» 


Figura 3.5 - Estilização de cabeçalhos. 

Esse exemplo prático demostra a estilização padrão de elementos para cabeçalhos 
e encontra-se disponível para consulta online. 


3.2.3 Estilização de elementos para textos inline 

Os elementos mark, dei, ins, s, u, em, strong, I, b e small são usados e estilizados con- 
forme previstos nas especificações para a HTML5. 

O exemplo mostrado a seguir esclarece a estilização de elementos para textos inline. 


• HTML 

<div class="container"> 

<div class="row"> 

<div class="col-md-12"> 

<mark>Estillzação do elemento></mark> <code>mark</code<hr> 
<del>Estllização do elemento</del> <code>del</code><hr> 
<ins>Estllização do elemento</ins> <code>ins</code><hr> 
<s>Estilização do elemento</s> <code>s</code><hr> 

<u>Estilização do elemento</u> <code>u</code><hr> 

<em>Estilização do elemento</em> <code>em</code><hr> 
<strong>Estllização do elemento</strong> <code>strong</code><hr> 
<i>Estilização do elemento</i> <code>i</code><hr> 

<b>Estilização do elemento <code>b</code></b><hr> 
<small>Estilização do elemento <code>small</code></small> 

</div> 

</div> <!-- /.row --> 

</di v> <!-- /.Container --> 

[.../c3/estilizacao-de-elementos-para-textos-inline.html] 
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Observe na figura 3.6 o resultado da aplicação da estilização padrão em elementos 
para textos inline. 

Estilização do elemento mark 
Est ili zação do c l omcnto dei 
Estilização do elemento ins 
Est ili zação do c l cmonto s 

Estilização do elemento u 
Estilização do elemento em 
Estilização do elemento strong 
Estilização do elemento i 
Estilização do elemento b 
Estilização do elemento small 

Figura 3.6 - Estilização de elementos para textos inline. 

Esse exemplo prático demostra a estilização padrão de elementos para textos 
inline e encontra-se disponível para consulta online. 


3.2.4 Estilização do elemento abbr 

O elemento abbr é usado para marcar abreviaturas em geral e estilizado de modo 
a mostrar uma janela tooltip com o significado da abreviatura quando o usuário 
coloca o ponteiro do mouse sobre ela. O texto do tooltip é definido no atributo 
títle do elemento abbr. 

Além desse comportamento, o Bootstrap prevê ainda o valor initialisn para o 
atributo classe do elemento abbr. Definir esse valor de classe no elemento abbr faz 
com que a abreviatura seja renderizada com um tamanho de fonte igual a 90% 
do tamanho de fonte padrão da abreviatura. 

O exemplo mostrado a seguir esclarece a estilização deste elemento. 

• HTML 

<div class="container"> 

<div class="row"> 

<div class="col-nd-12"> 
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<p><abbr title="HyperTextMarkupLanguage">HTML</abbr> é a 
linguagem de marcação para aplicações web.</p> 

<p><abbr title="HyperTextMarkupLanguage" class="initialism">HTML</abbr> é a 
linguagem de marcação para aplicações web.</p> 

</div> 

</div> <!-- /.row --> 

</div> <!-- /.Container --> 

</body> 

</html> 

[.../c3/estilizacao-do-elemento-abbr.html] 

Esse exemplo prático demostra a estilização padrão do elemento abbr e a estili- 
zação com uso da classe initialism e encontra-se disponível para consulta online. 

3.2.5 Estilização do elemento address 

O elemento address, introduzido nas especificações pela HTML5 é usado para 
marcar informações de contato relacionadas aos conteúdos de um elemento article 
ou ao conteúdo do elemento body como um todo. Não deve ser usado para marcar 
endereço postal generalizadamente exceto nos casos em que o endereço postal 
forneça informações de contato relacionadas aos conteúdos citados. 

Você pode visualizar os efeitos de estilização padrão do Bootstrap para o elemento 
address consultando o arquivo e mostrado a seguir. 

• HTML 

<div class="container"> 

<div class="row"> 

<div class="col-md-12"> 

<p>Contato com o autor do artigo :</p> 

<address> 

<strong>Maurício Samy Silva</strong><br> 

Rua: General Paulino 123 sala 4567<br> 

<abbr title="Código de endereçamento postal">CEP</abbr>: 00000-000<br> 
Carapena, AM. 

</address> 

</div> 

</div> <!-- /.row --> 

</div> <!-- /.Container --> 

[.../c3/estilizacao-do-elemento-address.html] 
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Esse exemplo prático demostra a estilização padrão do elemento address e encontra- 
-se disponível para consulta online ou download e consulta local. 


3.2.6 Estilização dos elementos blockquote e cite 

O elemento blockquote é usado para marcar um bloco de texto, ou seção, contendo 
uma citação extraída de uma fonte externa ao documento. O elemento cite destina- 
-se a marcar o título de um trabalho, ou obra, por exemplo: o título de um livro, 
um filme, um programa de TV, um ensaio, um poema, uma música, um jogo etc. 

Não confundir o elemento cite com o atributo cite, esse deve ser usado com os 
elementos blockquote e q e cujo valor deve ser um URL apontando para o endereço 
web de onde foi extraída a citação marcada por aqueles elementos. 

Você pode visualizar os efeitos de estilização padrão do Bootstrap para o elemento 
blockquote e para o uso do valor blockquote- reverse para o atributo class consultando 
o arquivo mostrado a seguir. 

• HTML 

< ! DOCTYPE html> 

<div class=''container"> 

<div class="row"> 

<div class="col-md-12"> 

«blockquote cite=" http://www.editoranovatec.coni. br. . ."> 

<p>A tentativa de o W3C evoluir. . . </p> 

<footer> 

<cite title="HTML5 A linguagem de marcação que revolucionou a web">Maujor, 

. . .</cite> 

</footer> 

</blockquote> 

</div> 

</div> <!-- /.row --> 

<hr> 

<div class="row''> 

<div class="col-md-12"> 

«blockquote cite="http : / /www. editoranovatec .com.br..." class="blockquote- reverse"> 
«p>A tentativa de o W3C evolui. . .«/p> 

«footer> 

«cite title="HTML5 A linguagem de marcação que revolucionou a web">Maujor, 

. . .</cite> 
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</footer> 

</blockquote> 

</div> 

</div> <! -- /.row --> 

</div> <!-- /.Container --> 

[.../c3/estilizacao-do-elemento-blockquote.html] 

A renderização do arquivo anterior é conforme mostrado na figura 3.7. Observe 
o efeito da estilização padrão do Bootstrap para os elementos blockquote e cite e o 
efeito do atributo classe com valor blockquote- reverse destinado a alinhar o conte- 
údo de blockquote à direita. 


A tentativa de o W3C evoluir a HTML para conformidade com XML fracassou, porque 
as páginas XHTML servidas como XML que contenham qualquer violação com a 
sintaxe XML causarão um erro fatal de parseamento e a página simplesmente não 
será renderizada. 

— Maujor, no seu livro HTML5 A linguagem de marcação que revolucionou a web 


A tentativa de o W3C evoluir a HTML para conformidade com XML fracassou, porque as 
páginas XHTML servidas como XML que contenham qualquer violação com a sintaxe 
XML causarão um erro fatal de parseamento e a página simplesmente não será 

renderizada. 

Maujor, no seu livro HTML5 A linguagem de marcação que revolucionou a web — 


Figura 3.7- Estilização dos elementos blockquote e cite. 


3.2.7 Estilização de elementos de lista 

Os elementos ul, ol e dl destinados a marcar listas receberam uma estilização 
padrão do Bootstrap cabendo destacar o valor list-unstyled para o atributo class 
dos elementos ul e ol. Definir esse valor de classe tem o efeito semelhante ao de 
se declarar Ust-style: none; nas CSS, ou seja, retira os marcadores das listas. 

O Bootstrap prevê o valor Ust-inline para o atributo classe dos elementos ul e ol 
que marcam as listas de ordenadas e não ordenadas. Definir esse valor de classe 
tem o efeito de alinhar horizontalmente os itens da lista. 
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O Bootstrap prevê também o valor dl -horizontal para o atributo class dos ele- 
mentos dl que marcam as listas de definição. Definir esse valor de classe tem o 
efeito de alinhar horizontalmente os termos de definição (dt) com seus termos 
de descrição (dd). 

Você pode visualizar os efeitos de estilização padrão do Bootstrap para os ele- 
mentos de listas e para o uso dos valores unistyled e dl -horizontal para o atributo 
class consultando o arquivo mostrado a seguir. 

• HTML 

<div class="container"> 

<div class="row"> 

<div class="col-nd-4"> 

<h3>Lista não ordenada</h3> 

<ul> 

<li>Abacaxi</li> 

<li>Laranja 

<ul> 

<li>Lima</li> 

<li>Bahia</li> 

</ul> 

</li> 

<U>Maçã</U> 

</ul> 

</div> 

<div class="col-nd-4"> 

<h3>Lista ordenada</h3> 

<ol> 

<li>Abacaxi</U> 

<U>Laranja 

<ul> 

<li>Lima</li> 

<li>Bahta</li> 

</ul> 

</li> 

<U>Maçã</U> 

</ol> 

</div> 

<div class="col-nd-4"> 

<h3>Lista sen narcadores</h3> 
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<ul class="Ust-unstyled"> 

<li>Abacaxi</U> 

<U>Laranja 

<ul> 

<li>Lima</li> 

<li>Bahia</li> 

</ul> 

</U> 

<li>Maçã</li> 

</ul> 

</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-12"> 

<h3>Lista não ordenada inline</h3> 

<ul class="list-inline"> 

<U>Abacaxi</U> 

<U>Laranja</li> 

<U>Lina</U> 

<li>Bahia</li> 

<li>Maçã</li> 

</ul> 

</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-6"> 

<h3>Lista de definição padrão</h3> 

<dl> 

<dt>Abacaxi</dt> 

<dd>Ananás ou abacaxi . . . </dd> 
<dt>Laranja</dt> 

<dd>A laranja é o fruto. . . </dd> 
<dt>Maçã</dt> 

<dd>A maçã é o fruto pomáceo. . .</dd> 

</dl> 

</div> 

<div class="col-nd-6"> 

<h3>Lista de definição horizontal</h3> 

<dl class="dl-horizontal"> 
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<dt>Abacaxi</dt> 

<dd>Ananás ou abacaxi é uma...</dd> 

<dt>Laranja</dt> 

<dd>A laranja é o fruto produzido. . . </dd> 

<dt>Maçã</dt> 

<dd>A maçã é o fruto pomáceo. . .</dd> 

</dl> 

</div> 

</div> <!-- /.row --> 

</div> <!-- /.Container --> 

[.../c3/estilizacao-de-listas.html] 

A renderização do arquivo anterior é conforme mostrado na figura 3.8. Observe 
o efeito da estilização padrão do Bootstrap para os elementos de lista e para o 
atributo classe com os valores list-unstyled e dl-horizontal. 


Lista não ordenada 

Lista ordenada 


Lista sem marcadores 

• Abacaxi 

1 Abacaxi 


Abacaxi 

• Laranja 

2. Laranja 


Laranja 

o Lima 

o Lima 


o Lima 

o Bahia 

o Bahia 


o Bahia 

• Maçã 

Lista não ordenada inline 

3. Maçã 


Maçã 

Abacaxi Laranja Lima Bahia Maçã 

Lista de definição padrão 


Lista de definição horizontal 

Abacaxi 


Abacaxi 

Ananás ou abacaxi é uma planta monocotiledõnea da 

Ananás ou abacaxi é uma planta monocotiledõnea da família das bromeliáceas. 


família das bromeliáceas, subfamília Bromelioideae. 

subfamília Bromelioideae. 

Laranja 


Laranja 

A laranja é o fruto produzido pela laranjeira (Citrus x 
sinensis), uma árvore da família Rutaceae. 

A laranja é o fruto produzido pela laranjeira (Citrus x sinensis). uma árvore da família 
Rutaceae. 

Maçã 

A maçã é o fruto pomáceo da macieira, árvore da família Rosaceae. 

Maçã 

A maçã é o fruto pomáceo da macieira, árvore da familia 
Rosaceae. 


Figura 3.8 - Estilização de listas. 


3.3 Códigos 

Os elementos code, kbd, var, samp e pre destinados a marcar códigos em linha e em 
nível de blocos respectivamente receberam estilização padrão do Bootstrap ca- 
bendo destacar o valor pre-scrollable para o atributo class do elemento pre. Definir 
esse valor de classe tem o efeito de limitar a altura total do bloco de código a 
350px provocando o aparecimento de barra de rolagem vertical quando a altura 
do bloco de código for maior que os 350px. 
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• O elemento kbd destina-se a marcar entrada do usuário, por exemplo teclas 
ou comandos de voz. 

• O elemento var destina-se a marcar variáveis tanto em expressões matemá- 
ticas como variáveis de programas e Scripts. 

• O elemento samp destina-se a marcar saídas ou resultados de programas. 

• O elemento code destina-se a marcar blocos de código. 

• O elemento pre destina-se a marcar textos pré formatados. 

Você pode visualizar os efeitos de estilização padrão do Bootstrap para os elemen- 
tos de marcação de códigos e para o uso do valor pre-scrollable para o atributo 
classe consultando o arquivo mostrado a seguir. 

• HTML 

<div class="container"> 

<div class="row"> 

<div class="col-md-3"> 

<h3>Elemento &lt ; code&gt; </h3> 

<p>0s elementos <code>&lt;div&gt;</code> e <code>&lt; span&gt; 

</code>não têm valor semântico. </p> 

</div> 

<div class="col-md-3"> 

<h3>Elemento &lt;kbd&gt;</h3> 

<p>Para aumentar pressione <kbd>Ctr +</kbd></p> 

</div> 

<div class="col-md-3"> 

<h3>Elemento &lt; var&gt; </h3> 

<p>A equação da reta é <var>y</var> = a<var>x</var> + b</p> 

</div> 

<div class="col-md-3"> 

<h3>Elemento &lt ; samp&gt; </h3> 

<p>0s retorno do script foi <samp>true</samp></p> 

</div> 

</div> <!-- /.row --> 

<hr> 

<div class="row"> 

<div class="col-md-6"> 

<h3>Elemento &lt;pre&gt;</code></h3> 

<pre> 

&lt ; ! DOCTYPE html> 
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&lt; html lang="pt-br"> 
&lt; head> 
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</pre> 

</div> 

<div class="col-nd-6"> 

<h3>Elenento &lt; pre class="pre- scrollable"&gt;</code></h3> 
<pre class="pre-scrollable"> 

&lt; ! DOCTYPE htnl> 

&lt; html lang="pt-br"> 

&lt; head> 


</pre> 

</div> 

</div> <!-- /.row --> 

</div> <!-- /.Container --> 

[.../c3/estilizacao-de-elementos-para-codigo.html] 

A renderização do arquivo anterior é conforme mostrado na figura 3.9. 


Elemento <code> Elemento <kbd> 

Os elementos <div> e Para aumentar pressione 

<span> não têm valor semântico. 

Elemento <pre> 

Elemento <var> Elemento <samp> 

A equação da reta é y = ax + b Os retorno do script foi true 

Elemento <pre class="pre-scrollable"> 

<! DOCTYPE htral> 

<! DOCTYPE htral> 

<html lang= ,, pt-br”> 

<html lang=”pt-br"> 

<head> 

<head> 

<meta charset="utf-8"> 

<meta charset="utf-8"> 

<title>Livro Bootstrap Maujor</title> 

<title>Livro Bootstrap Maujor</title> 

<link href=” . ./bootstrap/css/bootstrap.min.css” rel=”style 

<link href=”. ./bootstrap/css/bootstrap.min.css” rel=”sty 

sheet”> 

lesheet"> 

</head> 

</head> 

<body> 

<body> 

<div class=”container"> 

<div class=”container"> 

<div class="row"> 

<div class= M row"> 

<div class="’col-xs-5"> 

<div class="col-xs-5”> 

<h3>Ele*ento <code></h3> 

<h3>Elemento <codex/h3> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 

<p> ... </p> 


<p> ... </p> 


<p> ... </p> 


<p> ... </p> 


</div> 



Figura 3.9 - Estilização de elementos para marcar código. 
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Observe o efeito da estilização padrão do Bootstrap para os elementos para marcar 
códigos e para o atributo classe com o valor pre-scrollable. Notar que a estilização 
padrão prevê um fundo cinza e uma borda arredondada para ambos os elementos. 


3.4 Tabelas 

As funcionalidades do Bootstrap para estilização de tabelas baseiam-se em valores 

do atributo class a serem declarados no elemento table conforme descritos a seguir. 

• table - Estilização básica da tabela compreendendo declaração de padding 
para as células e bordas horizontais entre linhas. Uso: <table class="table">. 

• table table-striped - Estilização básica mais efeito zebra nas linhas. Usa o 
seletor nth-child e por isso não funciona nos IE8 e anteriores. Uso: <table 
class="table table-striped">. 

• table table- bordered - Estiliza a tabela com a declaração de padding para as 
células e bordas. Uso: <table class="table table-bordered">. 

• table table -hover - Estilização básica da tabela e efeito over nas linhas dentro 
de tbody. Uso: <table class="table table-hover">. 

• table table-condensed - Estilização básica da tabela com linhas de altura 
reduzida. Uso: <table class="table table-condensedV 

São previstos ainda, valores do atributo class a serem declarados no elemento tr. 

Os valores (nomes) dessas classes e suas finalidades são listados a seguir. 

• active - Estiliza a linha da tabela na cor azul cinza claro e indica uma linha 
com status de ativa. Uso: <tr class="active">. 

• success - Estiliza a linha da tabela na cor verde clara e indica uma linha com 
status de ação bem sucedida. Uso: <tr class="success">. 

• info - Estiliza a linha da tabela na cor azul clara e indica uma linha com 
status informativo. Uso: <tr class="info">. 

• warning - Estiliza a linha da tabela na cor laranja clara e indica uma linha 
com status de alerta. Uso: <tr class="warning">. 

• danger - Estiliza a linha da tabela na cor salmon clara e indica uma linha 
com status de perigo. Uso: <tr class="danger">. 
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Para demonstrar o uso e efeitos das classes de estilização de tabelas conforme 
descritas anteriormente usaremos nos exemplos que seguem a marcação de uma 
tabela conforme mostrada a seguir. 

• HTML 

<table> 

<caption>Estoque de frutas</caption> 

<thead> 

<tr> 

<th scope="col">No.</th> 

<th scope="col">Fruta</th> 

<th scope="col">Estoque<br>(kg)</th> 

<th scope="col">Preço/caixa<br>(R$)</th> 

</tr> 

</thead> 

<tfoot> 

<tr><td colspan="4">Valores finais para o mês de fevereiro/2012</td></tr> 

</tfoot> 

<tbody> 

<tr> 

<td>l</td> 

<td>Abacaxi</td> 

<td>270</td> 

<td>125,90</td> 

</tr> 

<!-- ciais três linhas de frutas --> 

</ tbody> 

</table> 


3.4.1 Estilização básica 

• HTML 

<table class="table"> 

<!-- marcação da tabela --> 
</table> 

[.../c3/estilizacao-basica-de-tabela.html] 
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Este exemplo de estilização de tabela encontra-se disponível para consulta online 
ou download e consulta local. 

Observe na figura 3.10 a renderização da tabela básica. 


Tabela básica 

<table class="table"> 
Estoque de frutas 


No. 

Fruta 

Estoque 

(Kg) 

Preço/caixa 

(Rí) 

1 

Abacaxi 

270 

125,90 

2 

Laranja 

460 

156,75 

3 

Maçã 

150 

98,20 

4 

Pera 

190 

74,40 


Valores finais para o mês de fevereiro/2012 

Figura 3.10 - Estilização de tabela básica. 


3.4.2 Estilização com efeito zebra 

• HTML 

<table class="table table-striped"> 

<!-- marcação da tabela --> 

</table> 

[.../c3/estilizacao-de-tabela-efeito-zebra.html] 

Este exemplo de estilização de tabela encontra-se disponível, para consulta online 
ou download e consulta local. 

Observe na figura 3.11 a renderização da tabela com efeito zebra. 

Para obter o efeito zebra o Bootstrap usa como seletor a pseudo-classe :nth-chüd() 
que não é suportada pelo Internet Explorer 8. 
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Tabela com efeito zebra 

<table class="table table-striped”> 
Estoque de frutas 




Estoque 

Preço/caixa 

No. 

Fruta 

(kg) 

(RS) 

1 

Abacaxi 

270 

125,90 

2 

Laranja 

460 

156,75 

3 

Maçã 

150 

98,20 

4 

Pera 

190 

74,40 


Valores tinais para o mês de fevereiro/2012 

Figura 3.11 - Estilização de tabela com efeito zebra. 


3.4.3 Estilização com classes de contexto 

Em tabelas as classes de contexto se destinam a estilizar as linhas da tabela com 
cores indicativas de um estado. Estas classes devem ser definidas para o elemento 
tr. As classes de contexto para tabelas e seus nomes e cores são: active (cor do 
tema), success (cor verde), info (cor azul), warning (cor amarela) edanger (cor salmão). 

• HTML 

<table class="table"> 

<tr class="succes">. . . </tr> 

<!-- marcação da tabela --> 

</table> 

[.../c3/estilizacao-de-tabela-com-classes-de-contexto.html] 

Este exemplo de estilização de tabela encontra-se disponível, no site do livro, para 
consulta online ou download e consulta local. 
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<table class="table table-bordered"> 

<!-- marcação da tabela --> 

</table> 

[.../c3/estilizacao-de-tabela-com-bordas.html] 

Este exemplo de estilização de tabela encontra-se disponível, no site do livro, para 
consulta online ou download e consulta local. 

Observe na figura 3.12 a renderização da tabela com bordas. 


Tabela com bordas 

ctable class="table table-bordered"> 

Estoque de frutas 



Estoque 

Preço/caixa 

No. 

Fruta 

(kg) 

(RS) 

1 

Abacaxi 

270 

125,90 

2 

Laranja 

460 

156,75 

3 

Maçã 

150 

98,20 

4 

Pera 

190 

74,40 


Valores finais para o mês de fevereiro/2012 


Figura 3.12 - Estilização de tabela com bordas. 


3.4.5 Estilização com efeito hover nas linhas 

• HTML 

<table class="table table-hover"> 

<!-- marcação da tabela --> 

</table> 

[.../c3/estilizacao-de-tabela-efeito-hover.html] 
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Este exemplo de estilização de tabela encontra-se disponível, no site do livro, para 
consulta online ou download e consulta local. 

Observe na figura 3.13 a renderização da tabela com efeito hover nas linhas (o 
mouse está sobre a segunda linha). 


Tabela com efeito hover 

<table class="table table~hover"> 

Estoque de frutas 


No. 

Fruta 

Estoque 

(Kg) 


Preço/caixa 

(Rí) 

1 

Abacaxi 

270 


125.90 

2 

Laranja 

460 


156,75 

3 

Maçã 

150 


98,20 

4 

Pera 

190 


74,40 


Valores finais para o mês de feverelro/20f 2 

Figura 3.13 - Efeito hover em linhas de tabela. 


3.4.6 Estilização com linhas condensadas 

• HTML 

<table class="table table-condensed"> 

<!-- marcação da tabela --> 

</table> 

[.../c3/estilizacao-de-tabela-condensada.html]] 

Este exemplo de estilização de tabela encontra-se disponível, no site do livro, para 
consulta online ou download e consulta local. 

Observe na figura 3.14 a renderização da tabela com linhas condensadas. 
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Tabela básica com efeito condensado 

<table class="table table-condensed"> 

Estoque de frutas 


No. 


Fruta 


Estoque 

(Kg) 


Preço/caixa 

(RS) 


1 

Abacaxi 

270 

125,90 

2 

Laranja 

460 

156,75 

3 

Maçã 

150 

98,20 

4 

Pera 

190 

74,40 

Valores finais para o mês de fevereiro/2012 


Figura 3.14 - Estilização de tabela com linhas condensadas. 

Para obter este efeito simplesmente diminuiu-se o valor de padding das linhas. 


3.4.7 Estilização responsiva 

Por padrão as tabelas tem um comportamento igual ao comportamento dos 
demais elementos da marcação, ou seja, contraem para se adaptar à largura da 
viewport. O Bootstrap prevê a classe table-responsive que se destina a eliminar 
o comportamento de contração da tabela em viewports com largura inferior a 
768px e criar uma barra de rolagem horizontal para a tabela. Notar que a tabela 
recebe um elemento div como Container e é esse elemento que recebe a classe 
table-responsive. 

• HTML 

<div class="table-responsive"> 

<table class="table"> 

<!-- narcação da tabela --> 

</table> 

</div 

[.../c3/estilizacao-de-tabela-responsiva.html] 

Este exemplo de estilização de tabela encontra-se disponível, no site do livro, para 
consulta online ou download e consulta local. 
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Observe na figura 3.15 a renderização da tabela com efeito responsivo. 


Tabela com efeito 
responsivo 


<div class-”table responsive“>. . .</div> 

Estoque de frutas 




Estoque 

Preço/caixa 

NO. 

Fruta 

(kg) 

(RS) 

1 

Abacaxi 

270 

125,90 

2 

Laranja 

460 

156,75 

3 

Maçã 

150 

98,20 

4 

Pera 

190 

74,40 


Valores finais para o mês de fevereiro/201 

< 1 I ► 


Figura 3.15 - Estilização de tabela responsiva. 


3.5 Formulários 

As funcionalidades do Bootstrap para estilização de formulários baseiam-se em 
valores do atributo classe a serem declarados nos elementos de formulário e cujos 
seletores CSS e respectivas finalidades estudaremos a seguir. 


3.5.1 Estilização de controles 

O Bootstrap prevê várias classes a serem aplicadas nos diferentes controles de for- 
mulários possibilitando uma estilização padrão. Nesse item veremos como aplicar 
as classes de estilização de controles e mostraremos os efeitos dessa estilização. 

3.5.1 .1 Estilização de input e textarea 

Os controles input tipo text e textarea recebem uma estilização padrão sem neces- 
sidade de declarar uma classe. A estilização consiste na aplicação de uma borda 
cinza com cantos arredondados. Ao ser dado o foco ao controle a borda assume 
a cor azul com um efeito de sombra em volta, também na cor azul. 
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Alerta: Os navegadores Internet Explorer versões anteriores ao IE9 não suportam 
bordas arredondadas nem o efeito de sombra para o foco, contudo nenhuma 
funcionalidade do controle se perde para aqueles navegadores, sendo que o foco 
no controle causa outline pontilhada. 


A marcação HTML mínima para mostrar a renderização estilizada desses controles 
é conforme a seguir. 

• HTML 

<input type="text" placeholder="Nopie"> 

<textarea rows="5'' placeholder="Sua nensagen aqui"x/textarea> 

Na figura 3.16 mostramos a renderização padrão e o efeito ao ser dado o foco no 
controle. 


Repouso 


Foco 


Nome 

Sua mensagem aqui 



Figura 3.16 - Estilização de caixas de texto. 


3.5. 1.2 Estilização de botões 

O Bootstrap prevê classes para estilizar botões. Essas classes destinam-se a defi- 
nir cores e dimensões dos botões. Teoricamente as classes podem ser aplicadas 
a qualquer elemento HTML da marcação, contudo a sua finalidade principal é 
para estilização dos elementos HTML para marcar âncoras a e botões, mais espe- 
cificamente os elementos button e os elementos input dos tipos button, subnit e reset. 

Está prevista a classe btn que serve de seletor para regras CSS que estilizam o 
botão sem bordas, cor de fundo cinza e cantos arredondados. 

Deve-se usar a classe btn-* em conjunto com a classe btn para completar a estili- 
zação do botão conforme descrito adiante. 
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O Bootstrap prevê oito classes para estilizar botões de forma geral. Os nomes 
dessas classes e suas finalidades são listadas a seguir. 

• btn - Destina-se a estilização padrão de um botão. Estiliza o botão sem 
bordas, cor de fundo cinza e cantos arredondados. 

• btn-default - Botão com fundo na cor branca e borda cinza arredondada. 

• btn-prinary - Botão com fundo na cor azul escura e borda arredondada. 

• btn-success - Botão com fundo na cor verde clara e borda arredondada. 

• btn-info - Botão com fundo na cor azul clara e borda arredondada. 

• btn-warning - Botão com fundo na cor laranja clara e borda arredondada. 

• btn-danger - Botão com fundo na cor salmão clara e borda arredondada. 

• btn-link-Esta classe se destina a ser aplicada (em conjunto com a classe btn) 
exclusivamente aos botões marcados com o elemento button. Ela transforma 
o botão padrão marcado com aquele elemento em um link padrão (como 
se fosse marcado com o elemento a). 

Ao ser dado o foco a qualquer um dos botões o fundo assume uma cor mais escura. 

Embora o elemento a destinado a marcar âncoras em geral, não seja um controle 
de formulário, pode ser estilizado como um botão com uso destas classes. 


Alerta: Os navegadores Internet Explorer versões anteriores ao IE9 não suportam 
bordas arredondadas nem o efeito degrade que, nesses casos, se transforma em 
uma cor cinza sólida, contudo nenhuma funcionalidade dos botões se perde 
para aqueles navegadores. 


A marcação HTML mínima para mostrar a renderização estilizada de alguns 
botões é conforme a seguir. 


• HTML 


<button type="button 
<button type="button 
<input type="subrút" 
<input type="button" 


" class="btn btn-primary">button primary</button> 

" class="btn btn-default">button default</button> 
class="btn btn-success" value="input-subrút success"> 
class="btn btn-warning" value="input-button warning"> 


<a href="#" class="btn btn-dange 

<button type="button" class="btn btn-link">button Unk</button> 


[.../c3/estilizacao-de-botoes.html] 


Conheça os livros do Maujor: http://livrosdomaujor.com.br 


Capítulo 3 ■ CSS 


89 


Ao usar um elemento a para criar um botão não esqueça de marcar o atributo e 
seu valor role="button". 

Na figura 3.17 mostramos a renderização dos botões conforme a marcação anterior. 



Figura 3.17 - Estilização de botões. 

Por padrão, os botões são estilizados com um padding que determina suas di- 
mensões. As classes . bt-lg, .btn-sm e .btn-xs possibilitam que se altere aquele valor 
padrão de padding e se obtenha botões com dimensões maiores, menores e muito 
menores que o botão padrão respectivamente. 

A marcação HTML para criar tais botões é conforme a seguir. 

• HTML 

<button type="button" class="btn btn-active btn-lg">botão maior</button> 

<button type="button" class="btn btn-active">botão padrão</button> 

<button type="button" class="btn btn-active btn-sni">e="button" 
class=" btn btn-active btn-xs">botão nuito nenor</button> 

[.../c3/dimensoes-de-botoes.html] 

Na figura 3.18 mostramos a renderização dos botões conforme a marcação anterior. 



botão maior 

botão padrão 

botão menor 

botão muito menor 





Figura 3.18 - Dimensões de botões. 

Por padrão os botões são elementos do tipo inline. A classe btn-block faz com que os 
botões se comportem como elementos nível de bloco e se expandam em largura 
por toda a largura do elemento que os contêm. 

Use a classe active para estilizar um botão tal como quando ele recebe o foco (cor 
de fundo mais escura). 

Para desabilitar um botão use o atributo disabled. Botões desabilitados são estili- 
zados com uma cor de fundo mais clara. 

A marcação HTML para criar aplicar estas classes aos botões é conforme a seguir. 
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HTML 

<div class=''container"> 

<div class="row"> 

<div class="col-nd-6"> 

<button type="button" 

<button type="button" 

<button type="button" 

</div> 

<div class="col-md-6"> 

<button type="button' 

<button type="button' 

<button type="button' 

</div> 

</div> <!-- /.row --> 

<hr> 

<div class=''row"> 

<div class="col-nd-6"> 

<button type="button' 

<button type="button" 

<button type="button' 

</ div> 

</div> <!-- /.row --> 

</div> <!-- /.Container --> 

[.../c3/outras-classes-para-botoes.html] 


class="btn btn-info btn-block">botão nível de bloco</button> 
class="btn btn-success btn-block">botão nível de bloco</button> 
class="btn btn-danger btn-block">botão nível de bloco</button> 


class="btn btn-info active">botão estado ativo</button> 
class=" btn btn-success active">botão estado ativo</button> 
class="btn btn-danger active">botão estado ativo</button> 


class="btn btn-info disabled">botão desabilitado</button> 
class="btn btn-success disabled">botão desabilitado</button> 
class="btn btn-dan</button> 


3.5. 1.3 Estilização de checkbox 

Para os controles input tipo checkbox está prevista a classe checkbox que serve de seletor 
para regras CSS destinadas basicamente a definir padding, nargin e alinhamentos 
com o objetivo de obter uma renderização crossbrowser para esses controles. 

A marcação HTML para cada checkbox e seu rótulo deverá estar contida dentro 
de um elemento div que recebe a classe checkbox conforme mostrado a seguir. 

• HTML 

<div class="checkbox"> 

<label><input type="checkbox">Opçãol</label> 

</div> 

<div class="checkbox"> 
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<label><input type="checkbox">Opção2</label> 

</div> 

<div class="checkbox"> 

<label><input type="checkbox">Opção3</label> 

</div> 

Os controles são renderizados na vertical. Opcionalmente você poderá usar a classe 
checkbox-inline a ser declarada para o elemento labei, que provoca a renderização 
na horizontal conforme mostrado a seguir. 

• HTML 

<label class="checkbox-inUne"><input type="checkbox">Opçãol</label> 

<label class="checkbox-inUne"><input type="checkbox">0pção2</label> 

<label class="checkbox-inline"><lnput type="checkbox">0pção3</label> 

E possivel estilizar os campos checkbox em formato de botões conforme mostrado 
na marcação HTML a seguir. 

• HTML 

<div class="btn-group" data-toggle="buttons"> 

<label class="btn btn-prinary actlve"> 

<input type="checkbox'' autoconplete="off" checked>Opção 1 (narcado) 

</label> 

<label class="btn btn-prinary"> 

<input type="checkbox" autoconplete="off">Opção 2 
</labey"> 

<input type=''checkbox" autoconplete="off">Opção 3 
</label> 

</div> 

[.../c3/estilizacao-de-checkbox.html] 

Na figura 3.19 mostramos a renderização dos controles na vertical e na horizontal 
e também a estilização dos checkboxes em formato de botão, conforme as mar- 
cações anteriores. 


Checkbox na vertical Checkbox na horizontal Checkbox com botões 

Q Opçãol □ Opçãol O Opção2 Q Opção3 

□ Opção2 

□ Opção3 


Figura 3.19 - Checkbox na vertical, horizontal e botões. 


Opção 1 (marcado) Opção 2 Opção 3 
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3.5. 1.4 Estilização de botão radio 

A marcação HTML para cada botão radio e seu rótulo deverá estar contida dentro 
de um elemento div que recebe a classe radio conforme mostrado a seguir. 

• HTML 

<di v class="radio"> 

<label><input type=" radio" nane="opcoesl">Opçãol</label> 

</div> 

<div class="radio"> 

<label><input type=" radio" nane="opcoesl">0pção2</label> 

</div> 

<div class="radio"> 

<label><input type=" radio" nane="opcoesl">0pção3</label> 

</div> 

Os controles são renderizados na vertical. Opcionalmente você poderá usar a classe 
radio-inline a ser declarada para o elemento labei, que provoca a renderização na 
horizontal conforme mostrado a seguir. 

• HTML 

<label class="radio-inline"><input type=" radio" nane="opcoes2">0pçãol</label> 

<label class="radio-inline"><input type=" radio" nane="opcoes2">0pção2</label> 

<label class="radio-inline"xinput type="radio" nane="opcoes2">0pção3</label> 

É possivel estilizar os campos tipo radio em formato de botões conforme mostrado 
na marcação HTML a seguir. 

<div class="btn-group" data-toggle="buttons"> 

<label class="btn btn-prinary"> 

<input type="radio" nane="opcao" id="opcaol" autocomplete="off">Radio 1 
</label> 

<label class="btn btn-prinary"> 

<input type="radio" nane="opcao" id="opcao2" autoconplete="off">Radio 2 
</label> 

<label class="btadio" nane="opcao" id="opcao3" autoconplete="off">Radio 3 
</label> 

</div> 

[.../c3/estilização-de-botao-radio.html] 


Conheça os livros do Maujor: http://livrosdomaujor.com.br 


Capítulo 3 ■ CSS 


93 


Na figura 3.20 mostramos a render ização dos controles na vertical e na horizontal 
e também a estilização dos campos tipo radio em formato de botão, conforme as 
marcações anteriores. 

Botão radio na vertical Botão radio na horizontal Botão radio com botões 

O Opçãol O Opçãol O Opção2 0 Opção3 

O Opção2 
O Opção3 

Figura 3.20 - Botão radio na vertical, na horizontal e botões. 


Radio 1 Radio 2 Radio 3 


3.5. 1.5 Estilização de select 

Os controles do tipo seleção devem ser marcados com a classe forn-control para 
recebem uma estilização padrão que consiste simplesmente na aplicação de uma 
borda cinza com cantos arredondados. A largura deste elemento é igual a largura 
do seu Container. 


Alerta: Os navegadores Internet Explorer versões anteriores ao IE9 não suportam 
bordas arredondadas. 


A estilização da borda é aplicada mesmo quando se declara o atributo multiple 
para o elemento select. A marcação HTML mínima para mostrar a renderização 
estilizada desses controles é conforme a seguir 

• HTML 

<select class="forni-control' , > 

<option>Escolha una das opções</option> 

<option>Opçãol</option> 

<option>0pção 2</option> 

</select> 

<select class="forpi-control" multiple> 

/option> 

<option>0pção l</option> 

<option>0pção 2</option> 

</select> 

[.../c3/estilizacao-de-select.html] 
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Na figura 3.21 mostramos a render ização dos controles com e sem a definição do 
atributo nultiple conforme a marcação anterior. 


Escolha uma das opções 

▼ Escolha uma das opções 

■ 


Opção 1 



Opção 2 

m 


Opção 3 



1 A 



Figura 3.21 - Controle de seleção. 


3. 5. 1.6 Texto de ajuda em controles 

O Boostrap prevê a classe help-block que se destina a posicionar os textos de ajuda 
para preenchimento ou mensagens de validação de controles. 

O exemplo mostrado a seguir esclarece a definição desta classe para criar textos 
de ajuda em dois campos. 

• HTML 

<input type="text" class="form-control" placeholder="Seu CPF" aria- 
describedby="helpBlockl"> 

<span id="helpBlockl" class="help-block">somente números</span> 

<input type="text" class="form-control" placeholder="y="helpBlock2"> 

<span id="helpBlock2" class="help-block">dd/mn/yyyy</ span> 

[.../c3/estilizacao-texto-de-ajuda.html] 


3.5.2 Estilização de formulário 

O Bootstrap prevê uma estilização padrão para formulários, bastando que se 
marque um div Container com a classe fom-group para cada conjunto de controles 
do formulário. 

Está prevista a classe forn-inline a ser declarada para o elemento forn e cuja fina- 
lidade é estilizar o formulário em linha. 

3.5.2. 1 Estilização padrão e em linha 

O código mostrado a seguir é a marcação HTML para um formulário simples e 
será usado para mostrar as estilizações padrão e em linha aplicada pela folha de 
estilos do Bootstrap. 
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<fom> 

<div class="fom-group"> 

<label for="enaU">Enail</label> 

<input type="email" class="fom-control" id="email" placeholder="Entre seu enail"> 

</div> 

<div class="fom-group"> 

<label for=" senha ">Senha</label> 

<input type="password'' class="fom-control" id="senha" placeholder="Senha"> 

</div> 

<div class="fom-group"> 

<div class="checkbox"> 

<label>Escolha as cores 

</div> 

<button type="subm.t" class="btn btn- 

<forn class="forpi-inUne"> 

<--! igual ao fomulário anterior --> 

</form> 

[.../c3/estilizacao-padrao-e-em-linha-de-formulario.html] 

Na figura 3.22 mostramos a renderização padrão e em linha para o formulário, 
conforme a marcação anterior. 

Email 

Entre seu email 

Senha 

Senha 

Escolha as cores 

□ Azul 

□ Verde 

□ Vermelha 

Enviar 


Email Entre seu email Senha Senha Escolha as cores LlAzul OVerde UVermelha Enviar 


Figura 3.22 - Formulário com estilização padrão e em linha. 
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3.6 Imagens 

O Bootstrap prevê a aplicação de três efeitos simples em imagens inseridas com 
uso de marcação HTML. Os efeitos são aplicados quando se define os valores do 
atributo classe para o elemento ing conforme listados a seguir. 

• ing-rounded - Aplica na imagem cantos arredondados usando raio igual a 
6px. 

• ing-circle -Aplica na imagem cantos arredondados usando raio igual a 50%. 
A imagem é renderizada como um círculo ou uma elipse, dependendo do 
seu aspect-ratio. 

• ing -thunbnail - Aplica na imagem um padding de 4px e uma borda de lpx na 
cor cinza. 

No Bootstrap, por padrão, as imagens não são responsivas, assim, para fazer a 
imagem responsiva use a classe ing-responsive. 

Se você pretende que todas as imagens da sua aplicação sejam responsivas, por 
padrão, crie a seguinte regra CSS. 

• HTML 

img { 

display : block; 
mito; 

} 

Para visualizar a estilização das imagens com os três efeitos aplicados consulte o 
arquivo disponível no site do livro conforme marcação HTML típica, mostrada 
a seguir. 

• HTML 

<ing class="iPig-responsive ing-circle" src="inagen. jpg" alt="dinossauro"> 

<ing class="ing-responsive ing-rounsauro"> 

<ing class="ing-responsive ing-thunbnail" src="inagen. jpg" alt="dinossauro"> 

[.../c3/estilizacao-de-imagem.html] 

Na figura 3.23 mostramos o efeito em imagens resultantes da definição dessas 
classes, conforme marcação HTML anterior. 
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Figura 3.23- Estilização de imagem. 


3.7 Classes auxiliares 

O Bootstrap prevê uma série de classes denominadas de helper classes que se desti- 
nam a destacar, centrar, flutuar, esconder, textos e componentes bem como destacar 
fundos, inserir marcas visuais fornecer dicas para leitores de tela e navegação por 
teclado. Veremos, a seguir, a aplicação e efeitos de tais classes. 


3.7.1 Cores contextuais 

Para estilizar textos com uma cor estão disponíveis as seguintes classes. 

• text-muted - Estiliza textos na cor #777. 

• text-primary - Estiliza textos na cor #337ab7. 

• text-success - Estiliza textos na cor #3c763d. 

• text-info - Estiliza textos na cor #31708f. 

• text-warning - Estiliza textos tiliza textos na cor #a94442. 

Para visualizar a estilização de textos com estas cores consulte o arquivodisponível 
no site do livro conforme marcação HTML típica, mostrada a seguir. 

• HTML 

<p class="text-Piuted">Este é um texto estilizado com a classe <code>muted 
</code></p> 

<p class="text-pripiary">Este é um texto estilizado com a classe <code>text-primary 
</code></p> 
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<p class="text-success">Este é um texto estilizado com a classe <code>text-success 
</code></p> 

<p class="text-info''>Este é um texto estilizado com a classe <code>text-info 
</code></p> 

<p class="text-warning">Este é um texto estilizado com a classe <code>text-warning 
</code></p> 

<p class="text-danger">Este é um texto estilizado com a classe <code>text-danger 
</code></p> 

[.../c3/estilizacao-de-textos-com-cores.html] 


3.7.2 Fundos contextuais 

Para estilizar o fundo de um box com uma cor estão disponíveis as seguintes classes. 

• bg-primary - Estiliza textos na cor #337ab7. 

• bg-success - Estiliza textos na cor #dff 0d8. 

• bg-info - Estiliza textos na cor #d9edf7. 

• bg-warning - Estiliza textos na cor #fcf8e3. 

• bg-danger - Estiliza textos na cor #f2dede. 

Para visualizar a estilização de fundo de boxes com estas cores consulte o arquivo 

disponível no site do livro conforme marcação HTML típica, mostrada a seguir. 

• HTML 

<p class="bg-muted">Este é um box com cor de fundo estilizada com a classe <code>muted 
</codex/p> 

<p class="bg-primary">Este é um box com cor de fundo estilizada com a classe <code> 
bg - prima ry</ code></p> 

<p class="bg-success">Este é um box com cor de fundo estilizada com a classe 
<code>bg-success</code></p> 

<p class="bg-info">Este é um box com cor de fundo estilizada com a classe <code>bg-info 
</codex/p> 

<p class="bg-warning">Este é um box com cor de fundo estilizada com a classe 
<code>bg-warning</code></p> 

<p class="bg-danger">Este é um box com cor de fundo estilizada com a classe 
<code>bg-danger</code></p> 

[.../c3/estilizacao-de-fundos-com-cores.html] 
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3.7.3 Marcadores fechar e dropdown 

Para criar um marcador X (xis) que indica fechamento de uma janela usa-se a 
classe close em um elemento button combinado com um elemento span para mar- 
car o xis. Para criar um marcador tipo pequeno triângulo apontando para baixo, 
destinado a indicar abertura de um e caret em um elemento span. 

Para visualizar a estilização e criação destes dois marcadores consulte o arquivo 
disponível no site do livro conforme marcação HTML típica, mostrada a seguir. 
Notar que por padrão a marca para fechar é posicionada no canto superior à 
direita do Container. 

• HTML 

<button type="button" dass="dose" aria - label="Close"><span aria - hidden=" true">&times; 
</spanx/button> 

<span class="caret"></span> 

[.../c3/estilizacao-de-marcadores.html] 


3.7.4 Flutuar 

Para flutuar elemento as classes . pull-left e .pull-right respectivamente. 

Para visualizar o efeito destas classes consulte o arquivo conforme marcação 
HTML típica, mostrada a seguir. 

• HTML 

<p dass="pull-left">Parágrafo à esquerda</p> 

<p class="pull-right">Parágrafo à direita</p> 

[.../c3/estilizacao-com-float.html] 

Alerta: Estas classes não devem ser usadas em barras de navegação. Conforme 
veremos no capítulo 4, para barras de navegação existem as classes navbar-left e 
navbar-right. 


3.7.5 Clearfix a classe clearfix 

Para "clarear floats" use a classe clearfix no Container dos elementos flutuados. 
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Para visualizar o efeito destas classes consulte o arquivo conforme marcação 
HTML típica, mostrada a seguir. 

• HTML 

<div class="clearfix"> 

<p dass="p u LTeft">Parágrafo à esquerda</p> 

<p dass="pd'l-right">Parágrafo à direita</p> 

</div> 

[.../c3/estilizacao-com-dearfix.html] 


3.7.6 Centrar na horizontal 

Para centrar na horizontal use a classe center-block. 

Para visualizar o efeito desta classe consulte o arquivo conforme marcação HTML 
típica, mostrada a seguir. 

• HTML 

<p dass="center-block 11 style="width : 50%"> 

Lorem ipsun. . . 

</div> 

[.../c3/estilizacao-para-centrar.html] 


3.7.7 Mostrar e esconder 

Para revelar e esconder conteúdos, inclusive para leitores de tela, use as classes .show 
e . hidden respectivamente. 


3.7.8 Leitores de tela e navegação por teclado 

Para esconder conteúdos exceto para leitores de tela use a classe sr-only. Os conteúdos 
escondidos com esta classe devem ser revelados obrigatoriamente para usuários 
que navegam com uso do teclado. Para isso existe a classe sr-only-focusable deve 
ser usada em conjunto com .sr-only. 
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3.7.9 Image replacement 

Esconder um texto dentro de um elemento e substituí-lo por imagem é uma 
técnica conhecida como image replacement. Nestes casos, para esconder o texto 
use a classe text-hide. 


3.7.10 Mostrar e esconder por breakpoints 

O Bootstrap prevê uma série de classes para controlar a visibilidade de conteú- 
dos de acordo com o breakpoint. É possível mostrar conteúdos em larguras de 
viewport acima de determinada largura e escondê-los abaixo daquela largura e 
vice-versa. 

Convém ressaltar que a opção pelo uso destas classes deve ser resultante de uma 
cuidadosa análise e conveniência, pois uma das diretrizes fundamentais do design 
responsivo preconiza que não se deve esconder conteúdos em função de larguras 
de telas ou natureza dos dispositivos. 

Nas tabelas 3.1 e 3.2 mostramos a sintaxe destas classes e seus efeitos. 


Tabela 3.1- Classes responsivas sintaxe 



Telefones (<768px) 

Tablets(>=768px) 

Desktop (>=992px) 

Desktop (>=1200px) 

.visible-xs-* 

MOSTRA 

ESCONDE 

ESCONDE 

ESCONDE 

.visible-sm-* 

ESCONDE 

MOSTRA 

ESCONDE 

ESCONDE 

.visible-md-* 

ESCONDE 

ESCONDE 

MOSTRA 

ESCONDE 

.visible-lg-* 

ESCONDE 

ESCONDE 

ESCONDE 

MOSTRA 

.hidden-xs 

ESCONDE 

MOSTRA 

MOSTRA 

MOSTRA 

.hidden-sm 

MOSTRA 

ESCONDE 

MOSTRA 

MOSTRA 

.hidden-md 

MOSTRA 

MOSTRA 

ESCONDE 

MOSTRA 

.hidden-lg 

MOSTRA 

MOSTRA 

MOSTRA 

ESCONDE 


Tabela 3.2- Classes responsivas níveis 


Grupo de classes 

CSSdisplay 

.visible-*-block 

display: block; 

.visible-*-inline 

display: inline; 

.visible-*-inline-block 

display: inline-block; 
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Observe a seguir um exemplos de sintaxe para algumas destas classes. 


• HTML 

<span class="hidden-xs">Esconde en x-small</span> 

<span class="visible-xs-block">Visivel en x-snall</span> 


<span class="hidden-sn">Esconde en snall</span> 

<span class="visible-sn-block">Visível en snall</span> 


<span class="hidden-nd">Esconde en nediun</span> 

<span class="visible-nd-block">Visível en nediun</span> 


<span class="hidden-lg">Esconde en large</span> 

<span class="visible-lg-block">Visível en large</span> 


[.../c3/estilizacao-mostra-esconde-por-breakpoints.html] 


3.7.11 Classes para impressão 

O Bootstrap prevê uma série de classes para controlar os conteúdos a serem 
impressos. 

Na tabela 3.3 mostramos a sintaxe destas classes e seus efeitos. 


Tabela 3.3- Classes para impressão 


Classes 

Navegador 

Impressão 

.visible-print-block 

ESCONDE 

MOSTRA 

.visible-print-inline 

ESCONDE 

MOSTRA 

.visible-print-inline-block 

ESCONDE 

MOSTRA 

.hidden-print 

MOSTRA 

ESCONDE 


3.8 Validação de formulários 

A indicação do resultado da validação faz-se com uso de cores e adicionalmente 
com inserção de ícones. 
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3.8.1 Validação com cores 

O Bootstrap prevê três classes para estilizar com cores os rótulos e as bordas dos 
campos do formulário fornecendo ao usuário informação sobre a validação dos 
dados entrados no campo. 

Para cumprir critérios de acessibilidade forneça, para as tecnologias assistivas 
e para usuários impedidos de distinguir cores alternativas à cor conforme pres- 
creve as especificações do W3C. Em campos não validados inclua a declaração 
aria-invaUd="true". 

As classes para estilizar com cores e suas finalidades são listadas a seguir. 

• has-warning - Estiliza as bordas, o texto do rótulo e textos de ajuda do controle 
na cor #8a6d3b e indica que a validação do campo resultou em um status de 
alerta. 

• has-error - Estiliza as bordas, o texto do rótulo e textos de ajuda do controle na 
cor #a94442e indica que a validação do campo resultou em um status de erro. 

• has-success- Estiliza as bordas, o texto do rótulo e textos de ajuda do controle 
na cor #3c763d e indica que a validação do campo resultou em um status de 
ação bem sucedida. 

Essas classes podem ser definidas para os rótulos dos controle, para os próprios 
controles ou para os containers marcados com a classe help-block. 

Você pode visualizar os efeitos da definição dessas classes consultando o arivro, 
mostrado a seguir. 

• HTML 

<div class="forn-group has-success"> 

<label class="control-label" for="sucesso">Input con sucesso</label> 

<input type="text" class="fom-control" id="sucesso"> 

</div> 

<div class="forn-group has-warning''> 

«dabel class="control-label" for="alerta">Input con alerta</label> 

<input type="text" class="fom-control" id="alerta"> 

</div> 

<div class="forn-group has-error"> 

<label class="control-label" for="erro">Input con erro</label> 

<input type="text" class="for(n-control'' id="erro"> 

</div> 
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<div class="has-success"> 

<div class="checkbox"> 

<label> 

<input type=''checkbox" id="checkboxSucesso" value="opcaol''> 
Checkbox con sucesso 
</label> 

</div> 

</div> 

<div class="has-warning"> 

<div class="checkbox"> 

<label> 

<input type="checkbox" id="checkboxAlerta" value="opcaol"> 

Checkbox con alerta 
</label> 

</div> 

</div> 

<div class="has-error"> 

<div class=''checkbox"> 

<label> 

<input type="checkbox" id="checkboxErro'' value="opcaol"> 

Checkbox con erro 
</label> 

</div> 

</div> 

[.../c3/estilizacao-estado-de-validacao.html] 


3.8.2 Validação com ícones 

Adicionalmente ao uso de cores em campos validados podemos incluir um ícone 
dentro e à direita do campo validado. Neste caso use a classe has-feedback como 
mostrado no exemplo. 

A marcação típica e as classes para incluir ícones de validação em campos de 
formulário é mostrada em destaque no exemplo a seguir. 

• HTML 

<div class="forn-group has-sucess has-feedback"> 

<label class="control-label" for="sucesso">Input con sucesso</label> 

<input type="text" class="forn-control" id="sucesso"> 
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<span class="glyphicon glyphicon-ok fom-control-feedback" aria-hidden="true"x/span> 

</div> 

<div class="forn-group has-warning has-feedback"> 

<label class="control-label" for="alerta">Input con alerta</label> 

<input type="text" class="form-control" id="alerta"> 

<span class="glyphicon glyphicon-warning-sign forn-control-feedback" aria- 
hidden="true"x/span> 

</div> 

<div class="forn-group has-error has-feedback"> 

<label class="control-label" for="erro''>Input com erro</label> 

<input type="text" class="forn-control" id="erro"> 

<span class="glyphicon glyphicon- renove forn-control-feedback" aria-hidden="true"></ 
span> 

</div> 

[.../c3/ estilizacao-icones-de-validacao.html] 

Dica: Mais detalhes sobre ícones do Bootstrap em [4.1] 


3.9 Temas 

Ainda que não seja do escopo deste livro estudar a criação de temas para o Boots- 
trap ao encerrar este capítulo vamos mencionar algumas facilidades que visam a 
criar temas para um projeto desenvolvido com uso do Bootstrap. 

Conforme vimos no item [13] o download dos arquivos do Bootstrap nos fornece, 
além de outros, o arquivo bootstrap.css e também sua versão minificada bootstrap. 
min.css. Este arquivo contém todas as regras CSS para estilização dos inúmeros 
seleto res e componentes e foi criado para atender um tema cuja apresentação é 
simples e ao mesmo tempo visualmente agradável. 

O fato de o Bootstrap ser usado em larga escala no mundo todo faz com que 
uma aplicação ou site desenvolvido com uso do tema padrão seja imeditamente 
reconhecido e não raro comparado com outros sites que também usam aquele 
tema (eu diria que tornou-se um tema “batido” ou “manjado”). 

Tal como acontece com qualquer folha de estilo destinada a criar um visual para 
o site (um tema) o desenvolvedor poderá alterar a folha de estilo de modo a criar 
um tema personalizado. Por tratar-se de uma folha de estilos com mais de 6.500 
linhas em sua versão não minificada, a tarefa de alterá-la manualmente visando 
a criar um novo tema seria extremamente árdua. 
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Felizmente existem vários mecanismos que facilitam a tarefa conforme descritos 
a seguir. 

• Variáveis LESS - Encontra-se disponível no site do Bootstrap uma interface 
gráfica destinada a alterar as váriáveis LESS que geram a folha de estilos. A 
interface encontra-se em http://getbootstrap.eom/customize/#less-variables. 

• Interfaces - Encontra-se disponível na internet várias interfaces gráficas para 
personalização e download de temas. Umas semelhantes à interface LESS 
do Bootstrap e outras de uso gratuito, mais intuitivo e simples. Entre estas 
indicamos a que se encontra em http://bootstrap-live-customizer.com/. Nela 
você escolhe o componente a estilizar e ao alterar uma das propriedades 
CSS visualiza imediatamente seu efeito. Uma busca no Google pela palavra- 
-chave “Bootstrap themes generator” retorna inúmeros links que fornecem 
interfaces geradoras de temas. 

• Temas prontos - Encontra-se disponível na internet vários temas prontos, sendo 
uns gratuitos e outros pagos. Este o caminho mais rápido para se encontrar 
um tema para o site pois na maioria dos casos é fornecida uma folha de 
estilos CSS minificada para download e basta que se substitua o link para 
a folha de estilo nativa por um link para a folha de estilo fornecida para o 
tema escohido. Ns do livrodos 1 mostram apontam para os arquivos dos 
exemplos aqui constantes criamos botões que permitem escolher direntes 
temas. Os temas ali constantes são gratuitos e foram obtidos em https:// 
bootswatch.com/. Uma busca no Google pela palavra-chave “Bootstrap the- 
mes” retorna inúmeros links para sites que fornecem temas prontos para o 
Bootstrap. 
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Componentes 


Neste capítulo estudaremos os componentes de interface (ou widgets) do Boots- 
trap. Componentes são criados com blocos de código padrão e classes de estilização 
previstas pelo Bootstrap de modo a renderizar o componente de forma apropriada 
ao padrão de estilização, ou tema, adotado pelo Bootstrap. Para cada componente 
examinaremos a marcação HTML típica e as classes de estilização necessárias para 
renderização correta do componente. Os componentes disponíveis e que serão 
estudados neste capítulo são: ícones, dropdowns, agrupamento de botões, botões 
dropdown, elementos de navegação, rótulos e marcadores, thumbnails, elementos 
tipográficos, alertas, barras de progresso, objetos de mídia e classes genéricas. 


4.1 ícones 

O Bootstrap incorpora um conjunto de mais de 260 ícones denominado 
Glyphicon Halflings ( http://glyphicons.com / ) desenvolvido por terceiros e cedido 
por seus criadores para o Bootstrap. 

Trata-se de um conjunto de ícones do tipo icon font que poderá ser inserido com 
uso de qualquer elemento da marcação, que não se destine a criar uma funciona- 
lidade do Bootstrap, isto é, o elemento não deverá conter qualquer par atributo/ 
valor específico do Bootstrap. Em geral usa-se um elemento span para inserir ícone 
inline e div para inserir ícone nível de bloco. 

O elemento que marca o ícone deverá estar vazio, ou seja, nenhum conteúdo 
deverá ser inserido no elemento. 

São previstas duas classes para inserir ícones: glyphicon e glyphicon-*, a primeira 
contém as regras CSS de estilização geral, válidas para todos os ícones do Bootstrap 
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e a segunda define o ícone a ser inserido. A marcação típica para inserir um ícone 
é mostrada a seguir. 

<span class="gliphicon glyphicon-heart"x/span> 

Esta marcação cria o ícone de um coração (heart) na cor preta e com dimensões 
conforme explicado a seguir. 

Icon font é um glifo, tal como é qualquer fonte, portanto pode ser estilizado como 
fontes. Os ícones são na cor preta conforme a cor padrão do Bootstrap para fontes e 
suas dimensões (e cores) são as mesmas das fontes contidas no elemento que insere 
o ícone, ou seja, em tese, um ícone inserido com uso de um elemento hl é maior do 
que um ícone inserido com uso de um elemento p, e sua cor a mesma cor daqueles 
elementos. Mas, essa comparação foi apenas para exemplificação, não insira ícones 
com uso desses elementos, pois eles não são cabeçalhos e muito menos parágrafos. 

Observe um exemplo real que comprova a comparação feita. 

<hl>Coração <span class="glyphicon glyphicon-heart"></span></hl> 

<p>Coração <span class="glyphicon glyphicon-heart"></span></p> 

[.../c4/icones.html] 

Este exemplo encontra-se no site do livro, para consulta online. 

No primeiro caso o tamanho de fonte do elemento span é herdado do elemento 
hl e no segundo do mesmo acontece com o elemento p. 

Para alterar a cor do ícone use a propriedade CSS color que altera cor das fontes. 
Observe a seguir alguns exemplos de alteração de cores de ícones. 

• CSS 

.glyphicon { color: red; } /* Altera globalnente a cor de todos os ícones */ 
.glyphicon-heart { color: red; } /* Altera globalnente a cor de un determinado ícone */ 

Podemos usar uma das classes de cores contextuais conforme descritas em [3.7.1] 
para alterar a cor de um ícone, conforme mostrado a seguir. 

<p>Coração <span class="glyphicon glyphicon-heart text-info"></span></p> 

Podemos usar uma classe personalizada para alterar a cor de um ícone. A classe 
será estilizada com uso de CSS na cor escolhida pelo autor. 

<p>Coração <span class="glyphicon glyphicon-heart cor-um"></span></p> 

Tal como acontece com a cor de qualquer fonte, se não for explicitamente definida 
uma cor para o elemento que insere o ícone, ele ícone, herda a cor do elemento-pai. 
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Se por um motivo qualquer você precisar alterar as dimensões do ícone use 
a propriedade CSS font-size que altera tamanho de fontes e proceda tal como 
fizemos para alterar a cor do ícone. Para as dimensões do ícone, a herança CSS 
também é válida. 

Para uma lista completa dos ícones e suas classes para inserção consulte 
http://getbootstrap.eom/components/#glyphicons. 


4.2 Dropdown e dropup 

Convém ressaltar que para possibilitar o funcionamento do menu dropdown é 
necessário incluir na página que receberá o menu a biblioteca j Query, o plugin 
do Bootstrap para dropdown (está no arquivo bootstrap.min.js ) conforme mostrado 
em [1.4]. 

A marcação HTML típica, a definição das classes dropdown e dropup e dos atributos 
dos elementos de marcação necessários para estilizar e fazer funcionar um menu 
dropdown (abre submenu para baixo) e outro dropup (abre submenu para cima) 
são mostrados a seguir. 

• HTML 

1. <div class="dropdown"> <!-- Menu abre para baixo --> 

2. <button class="btn btn-prinary dropdown-toggle 11 type="button" id="dropDownl" 
data-toggle="dropdown" aria-expanded="true">Frutas <span class="caret"></span></button> 

3. <ul class="dropdown-nenu" role="nenu" aria-labelledby="dropDownl"> 

4. <ü role="presentation"xa role="nenu-iten" href="#" tabindex="-l">Abacaxi</a></li> 

5. <ü role="presentation"xa role="nenu-iten" href="#" tabindex="-l">Laranja</ax/U> 

6. <li role="p resenta tion"><a role="nenu-iten" href="#" tabindex="-l">Maçã</a></U> 

7. <li class="divider"x/li> 

8. <li role="presentation"xa role="nenu-iten" href="#" tabindex="-l">Outras. . ,</ax/li> 

9. </ul> 

10. </div> <!-- /.dropdown --> 

11. <div class="dropup"> <!-- Menu abre para cina --> 

12. <button class="btn btn-prinary dropdown-toggle 11 type="button" id="dropUpl" 
data-toggle="dropdown" aria-expanded="true">Frutas <span class="caret"x/spanx/button> 

13. <!-- idêntico ao anterior --> 

14. </div> <!-- /.dropup --> 

[.../c4/dropdown-dropup.html] 
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Código comentado: 


Linha(s) Descrição 


Linhas 1 e 10 
Linha 2 


Linhas 3 e 9 

Linhas 4 a 8 
Linha 7 

Linhas 11 a 14 
Linha 12 


Para obter o efeito dropdown é necessário criar um div Container e a 
ele definir class=dropdown. Esse div será o Container geral do dropdown. 

Aqui inserimos o elemento que ao ser clicado fará o menu abrir (no caso 
um botão). Esse elemento deverá receber o atributo data - toggle="dropdown " , 
pois atributos data - * são a referência para que o plugin dropdown que foi 
incorporado à página juntamente com a biblioteca j Query identifique 
e faça funcionar o dropdown. 

Elemento ul Container dos links do menu dropdown. Esse Container 
deverá receber o atributo class=" dropdown -menu". 

Elementos ü (itens da lista) containeres dos links do menu. 

Aqui um elemento li (item da lista) vazio com a atributo class="divider" . 
Essa classe quando aplicada a um dos itens da lista que esteja vazio, 
cria uma linha horizontal cinza divisória dos itens. 

Cria um menu dropup de modo idêntico ao anterior. Esse menu abre 
para cima. 

Marcação do botão para acionar o menu dropdown. As classes aqui 
contidas foram estudadas na linha 2. 


Na figura 4.1 mostramos a renderização dos dois menus, conforme marcação 
HTML anterior. 


Abacaxi 

Laranja 

Maçã 

Outras... 


Frutas - 


Figura 4.1 - Menus dropdown e dropup. 

No nosso exemplo usamos um elemento button, teoricamente você pode usar 
qualquer elemento HTML para acionar a abertura do menu, mas é claro, deverá 
escolher o elemento mais apropriado e semântico. 


Frutas ■* 


Abacaxi 

Laranja 

Maçã 

Outras... 
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Dica: Alguns componentes estudados neste capítulo dependem da inclusão de 
plugins para funcionar. Nesses casos o Bootstrap prevê um atributo do tipo data-* 
com um valor declarado, que chama automaticamente o método do plugin no 
elemento ao qual foi aplicado. Como regra geral, sempre que você encontrar um 
atributo data-* na marcação, ele tem a função de chamar um plugin. Em geral 
o valor desse atributo é o nome do plugin (ver linha 2 do código comentado 
anteriormente). No capítulo 5 estudaremos, com detalhes, os plugins. 


4.2.1 Alinhamento, título e item desabilitado 

Por padrão, os componentes do Bootstrap são alinhados à esquerda segundo a 
convenção de escrita para idiomas ocidentais. Está previsto um valor para o atri- 
buto classe, denominado dropdown-nenu-right, a ser declarado para o Container dos 
itens do menu e que se destina a alinhar os itens do menu à direita com aplicação 
da declaração CSS float : right; . 

Para inserir um título em um conjunto de itens do menu use a classe dropdow-header 
conforme marcação mostrada a seguir. 

<U role="presentation" class="dropdown-header">Título dos itens</ü> 

Para desabilitar um item do menu use a classe disabled conforme marcação mos- 
trada a seguir. 

<U role="presentation'' class="disabled">Iter r i desabiUtado</U> 

O exemplo a seguir mostra a mesma marcação HTML do exemplo anterior para 
o menu dropup com a definição das classes para alinhar os itens do menu à di- 
reita, para criar um título para um conjunto de itens e para desabilitar um item. 

• HTML 

<div class="dropup"> 

<button class="btn btn-prinary dropdown-toggle" type="button" ld="dropDownl" 

data-toggle="dropdown" aria-expanded="true">Frutas <span class="caret"></span></button> 
<ul class="dropdown-nenu dropdown-nenu-right" role="nenu" aria-labelledby="dropDownl"> 
<li role="presentation" class="dropdown-header">Frutas específicas</U> 

<li role="presentation"xa role="nenu-iten" href="#" tabindex="-l">Abacaxi</a></li> 
<li role="presentation" class="disabled"><a role="nenu-iten" href="#" 
tabindex="-l">Laranja</a></li> 

<li role="presentation"xa role="nenu-iten" href="#" tabindex="-l">Maçã</a></U> 

<li class="divider"x/U> 
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<li role= l 'presentation''xa role= "menu - item " href="#" tabindex="-l">Outras. . .</a></U> 
</ul> 

</div> <!-- /.dropdown --> 

[.../c4/dropdown-alinhamento-titulo-item-desabilitado.html] 


4.3 Agrupamento de botões 

O Bootstrap prevê as classes btn-group, btn-group-vertical e btn-toolbar destinadas 
a criar agrupamentos de botões. A seguir veremos cada uma dessas classes, sua 
aplicação e finalidade. 


4.3.1 Agrupamento em linha 

Para agrupar botões em linha basta criar um div Container para os botões e a ele 
definir a classe btn-group e o atributo role conforme mostrado a seguir. 

• HTML 

<div class="btn-group" role="group"> 

<button type="button" class="btn btn- primary ">Novo</button> 

<button type="button" class="btn btn- primary ">Abrir</button> 

<button type="button" class="btn btn- primary ">Fechar</button> 

<button type="button" class="btn btn-prinary">Salva 
<button type="button" class="btn btn-prinary">Salvar</button> 

</div> 

[.../c4/agrupamento-de-botoes.html] 


4.3.2 Agrupamento vertical 

Para agrupar botões na vertical basta criar um div Container para os botões e a ele 
definir a classe btn-btn-group-vertical conforme mostrado a seguir. 

• HTML 

<div class="btn-group-vertical" role="group"> 

<button type="button" class="btn btn- primary ">Novo</button> 

<button type="button" class="btn btn - primary ">Abrir</button> 

<button type="button" class="btn btn- primary ">Fechar</button> 
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<button type="button" class="btn btn- primary ">Salvar</button> 
</div> 

[.../c4/agrupamento-de-botoes.html] 


4.3.3 Agrupamento barra de ferramentas 

Para criar múltiplos grupos de botões basta criar um div Container para todos os 
agrupamentos de botões (como estudados anteriormente) e a ele definir a classe 
btn-toolbar e role="toolbar" conforme mostrado a seguir. 

• HTML 

<div class="btn-toolbar" role="toolbar"> 

<button type="button" class="btn btn- primary ">Novo</button> 

<button type="button" class="btn btn - primary ">Abrir</button> 

<button type="button" class="btn btn - primary ">Fechar</button> 

<button type="button" class="btn btn - primary">Salvar</button> 

</div> 

[.../c4/agrupamento-de-botoes.html] 

Na figura 4.2 mostramos a renderização dos três casos de agrupamento de botões, 
conforme marcações HTML anteriores. 


4.3.4 Agrupamento justificado 

Para agrupar botões em linha de modo que eles se expandam com igual largura 
e ocupem toda a largura do Container basta criar um div Container para cada um 
dos botões e um div Container geral definindo para ele as classes btn-group e btn - 
group- justified e o atributo role conforme mostrado a seguir. 

• HTML 

<di v class="btn-group btn-group-justified" role="group"> 

<div class="btn-group role="group"> 

<button type="button" class="btn btn-prinary">Novo</button> 

</div> 

<div class="btn-group role="group"> 

<button type="button" class="btn btn-prinary">Abrir</button> 

</ div> 


Conheça os livros do Maujor: http://livrosdomaujor.com.br 


114 


Boostrap 3.3.5 


<div class="btn-group role="group"> 

<button type="button" class="btn btn-prinary">Fechar</button> 
</div> 

<div class="btn-group role="group"> 

<button type="button" class="btn btn-prinary">Salvar</button> 
</div> 

</div> 

[.../c4/agrupamento-de-botoes.html] 


4.3.5 Dimensionamento 

Conforme estudamos no item [3.5.1.2] por padrão, os botões são estilizados com 
um padding que determina suas dimensões. Em um agrupamento de botões as 
classes .btn-group-lg, .btn-group-sn e .btn-group-xs, possibilitam que se altere aquele 
valor padrão de padding e se obtenha botões com dimensões maiores, menores e 
muito menores que o botão padrão respectivamente. 

A marcação HTML para criar tais botões é conforme a seguir. 

• HTML 

<div class="btn-group btn-group-lg" role="group" aria-label="Large button group"> 

<button type="button" class="btn btn-success">novo</button> 

<button type="button" class="btn btn-success">abrir</button> 

<button type="button" class="btn btn-success">fechar</button> 

<button type="button" class="btn btn-success">salvar</button> 

</div> 

<div class="btn-group" role="group" aria-label="Default button group"> 

<!-- iden --> 

</div> 

<div class="btn-group btn-group-sn" role="group" aria-label="Mediun button group"> 

<!-- iden --> 

</div> 

«div class="btn-group btn-group-xs" role="group" aria-label="Snall button group"> 

<!-- iden --> 

</div> 

[.../c4/agrupamento-de-botoes.html] 
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Observe na figura 4.2 os diferentes tipos de agrupamento de botões e seu dimen- 
sionamento, conforme as marcações mostradas no item [4.3] . 


Novo Abrir Fechar Salvar 


. btn-group-lg 


novo abrir fechar salvar 


. btn-group-vertical 



. btn-toolbar 


Novo ■ Abrir ■ Fechar I Salvar 


.btn-group . btn-group- justif ied 


.btn-group 


.btn-group-sm 


.btn-group-xs 


abrir fechar salvar I novo abrir fechar salvar I novo abrir fechar salvar 


Figura 4.2 - Agrupamento de botões. 


4.4 Botões dropdown 

Convém ressaltar que para possibilitar o funcionamento de um botão dropdown 
é necessário incluir na página que receberá o botão a biblioteca j Query, o plugin 
do Bootstrap para dropdown (está no arquivo bootstrap.min.js ) conforme mostrado 
em [1.4]. 

Vejamos a seguir os casos possíveis de combinações para criar menus dropdown 
com botões. 


4.4.1 Botões dropdown simples 

Para criar um botão dropdown simples usamos um Container geral com a classe 
btn-group. O botão é criado com qualquer uma das marcações para criar botões 
como mostrado em [3.5.1.2] e a ele deve ser definida a classe dropdown-toggle e o 
par atributo/valor data-toggle="dropdown". Alista de links deve ser marcada com um 
elemento ul que recebe a classe dropdown-nenu. 

A marcação HTML típica para criar um botão dropdown, conforme descrito, é 
mostrada a seguir. 
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• HTML 

<div class="btn-group"> 

<button type=" button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" 
aria-expanded="false"> 

EDITAR <span class="caret"></span> 

</button> 

<ul class="dropdown-nenu" role="nenu"> 

<li><a href="#">novo</a></li> 

<li><a href="#">abrir</a></U> 

<U><a href="#">fechar</ax/U> 

<U class="divider"x/U> 

<U><a href="#">salvar</ax/li> 

</ul> 

</div> 

[.../c4/botoes-dropdown.html] 


4.4.2 Botões com ícone de abertura separado 

Para criar um botão dropdown simples como ícone de abertura separado usa-se 
a mesma marcação HTML anterior com acréscimo de um novo botão contendo 
o seu texto, conforme destacado no código a seguir. 

• HTML 

<div class="btn-group"> 

«button type="button" class="btn btn-default>EDITAR«/button> 

«button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" 
aria-expanded="false"> 

EDITAR «span class="caret"x/span> 

</button> 

<ul class="dropdown-nenu" role="menu"> 

<U>«a href="#">novo«/ax/li> 

<U>«a href="#">abrir«/ax/U> 

<U>«a href="#">fechar«/ax/U> 

<li class="divider"x/U> 

«lixa href="#">salvar«/ax/U> 

</ul> 

</div> 

[.../c4/botoes-dropdown.html] 
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4.4.3 Botões com ícone de abertura Glyphicon e integrado 

A marcação HTML típica para criar o ícones glyphicon integrados aos botões 
consiste em se substituir a marcação do ícone de abertura padrão pela marcação 
do ícone glyphicon conforme mostrado em destaque a seguir. 

• HTML 

<div class="btn-group"> 

<button type="button" class="btn btn -def ault>EDITAR</button> 

<button type="button" class="btn btn-default dropdown-toggle" 
data-toggle="dropdown" aria-expanded="false"> 

<span class = "caret"x/span> 

<span class="glyphicon glyphicon-pencil"x/span> 

</button> 

<ul class="dropdown-nenu" role="menu"> 

<U><a href="#">novo</a></li> 

<lixa href="#">abrir</ax/U> 

<U><a href="#">fechar</ax/li> 

<U class="divider"x/U> 

<U><a href="#">salvar</ax/li> 

</ul> 

</div> 

[.../c4/botoes-dropdown.html] 


4.4.4 Dimensionamento 

Conforme estudamos no item [3.5.1.2] por padrão, os botões são estilizados com 
um padding que determina suas dimensões. O uso das classes .btn-group-lg, ,btn- 
group-sn e .btn-group-xs, possibilita que se altere aquele valor padrão de padding e se 
obtenha botões com dimensões maiores, menores e muito menores que o botão 
padrão respectivamente. Ver [43.5] para exemplo de uso destas classes. 


4.4.5 Botão dropup 

É possível inverter o sentido de abertura do botão dropdown com uso da classe 
dropup no Container geral do botão como mostrado a seguir. 
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• HTML 

<div class="btn-group dropup"> 

<!-- marcação típica cono mostrada nos exemplos anteriores --> 

</div> 

Observe na figura 43 os diferentes tipos add-on de texto e botões dropdown, 
conforme as marcações mostradas no item [4.4], 


Botões dropdown simples 


EDITAR (btn-default) ▼ 


EDITAR (btn-primary) - I EDITAR (btn-success) I EDITAR (btn-info) ▼ I EDITAR (btn-waming) ▼ I EDITAR (btn-danger) - 


Botões dropdown com ícone de abertura separado 


EDITAR (btn-default) 


EDITAR (btn-primary) - I EDITAR (btn-success) - I EDITAR (btn-info) - I EDITAR (btn-waming) - I EDITAR (btn-danger) - 


BUSCA 


Botões dropdown com Glyphicon 


FAVORITOS ★ I CONTATOS >3 I LOCALIZAÇÃO Q I SINCRONIZAR C I EDITAR / 


Figura 4.3 - Botões dropdown. 


4.5 Controle input com add-on 

O Bootstrap prevê funcionalidades que permitem inserir texto de ajuda (ou com- 
plementar) e botões, antes, depois ou mesmo em ambas as extremidades (antes e 
depois) dos controles (campos) de formulário input para entrada de textos. 

Convém ressaltar que para possibilitar a inserção é necessário incluir na página 
que receberá o controle a biblioteca j Query, o plugin do Bootstrap para dropdown 
(está no arquivo bootstrap.min.js ) conforme mostrado em [1.4]. 

Vejamos a seguir os casos possíveis de combinações para inserção em controles 

input. 


4.5.1 Texto add-on 

Para obter esses efeitos o Bootstrap prevê a classe input-group a ser declarada em 
um elemento div Container para o texto e o campo input. É prevista também a 
classe input-group-addon a ser declarada em um elemento span Container para o texto. 
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A marcação HTML para mostrar a renderização estilizada para esses casos é 
conforme a seguir. 

• HTML 

<!-- Texto integrado antes --> 

<div class="input-group"> 

<span class="input-group-addon" id="addonl">@</span> 

<input type="text" class="fom-control" placeholder="Twitter" 
aria-describedby="addonl"> 

</div> 

<!-- Texto integrado depois --> 

<div class="input-group"> 

<input type="text" cLass="form-controL" placeholder="Seu enail" 
aria-describedby="addon2"> 

<span class="input-group-addon" id="addon2">@gnaü . con</ span> 

</div> 

<!-- Texto integrado antes e depois --> 

<div class="input-group"> 

<span class="input-group-addon">R$</span> 

<input type="text" class="form-controL" placeholder="Totai da sua conpra" 
aria-iabel="Valor en reais"> 

<span class="input-group-addon">,00</span> 

</div> 

[.../c4/input-com-add-on.html] 

Notar que ordem de declaração dos elementos span e input é importante para 
a correta renderização do texto na sua posição (antes, depois ou em ambos os 
lados do controle). 


4.5.2 Botão simples add-on 

Assim como vimos para textos no item anterior, os controles input para textos po- 
dem ser estilizados com uso de botões integrado antes ou depois do campo input. 

Para obter esses efeitos o Bootstrap prevê a classe input-group-btn a ser declarada 
no elemento span Container para o botão. 

A marcação HTML para mostrar a inserção de botão simples antes e depois do 
controle é conforme a seguir. 
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• HTML 

<!-- Botão simples antes --> 

<div class="input-group"> 

<span class="input-group-btn"> 

<button class="btn btn-def ault" type="button">IR</button> 

</span> 

<input type="text" class="form-control" placeholder="CPF"> 

</div> 

<!-- Botão simples depois --> 

<div class="input-group"> 

<input type="text" class="fom-control" placeholder="Palavra-chave"> 

<span class="input-group-btn"> 

<button class="btn btn-def ault" type="button">BUSCAR</button> 

</span> 

</div> 

[.../c4/input-com-add-on.html] 

Notar que ordem de declaração dos elementos que marcam o botão e o campo 
input é importante para a correta renderização do botão na sua posição. 


4.5.3 Botão dropdown add-on 

Assim como vimos para botões simples no item anterior, os controles input para 
textos podem ser estilizados com uso de botões dropdown integrado antes ou 
depois do campo input. O botão dropdown deve estar contido em um div com a 
classe input-group-btn. 

Para obter esses efeitos basta que se declare a marcação HTML típica para botões 
dropdown em lugar de botões simples. 

A marcação HTML para mostrar a inserção de botão dropdown antes e depois 
do controle é conforme a seguir. 

• HTML 

<!-- Botão dropdown antes --> 

<div class="input-group"> 

<div class="input-group-btn"> 

cbutton type="button" class="btn btn-default">CONTATOS</button> 

<button type="button" class="btn btn-default dropdown-toggle" 
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data-toggle="dropdown" aria-expanded="false"> 

<span class="glyphicon glyphicon-envelope"></span> 

</button> 

<ul class="dropdown-nenu" role="menu"> 

<U><a href="#">un</a></U> 

<U><a href="#">dois</a></li> 

<U><a href="#">três</ax/U> 

<li class="dívider"x/li> 

<U><a href="#">quatro</ax/U> 

</ul> 

</div> 

<input type="text" class="form-control" placeholder="Contatos"> 

</div> 

<!-- Botão dropdown depois --> 

<div class="input-group"> 

<input type="text" class="fom-control" placeholder="Favoritos''> 

<div class="input-group-btn"> 

<button type="button" class="btn btn-default ">FAVORITOS</button> 

<!-- idênti 

[.../c4/input-com-add-on.html] 

Notar que ordem de declaração dos elementos que marcam o botão e o campo 
input é importante para a correta renderização do botão na sua posição. 

Observe na figura 4.4 os diferentes tipos de add-on em controles input, conforme 
as marcações mostradas no item [4.5], 



Figura 4.4 - Input com add-on. 
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4.6 Navegação 

As funcionalidades de navegação previstas pelo Bootstrap são: abas e pills (lista 
de links simples). A marcação padrão para criar estes dois tipos de navegação 
consiste de um Container ul com a classe nav e seus elementos li. As classes nav- 
tabs e nav -pills criam, respectivamente, os dois tipos de navegação. 

Observe a marcação típica como citada e que será usada nos exemplos de nave- 
gação constantes deste item do livro. 

• HTML 

<ul class="nav"> 

<li role="presentation" class="active"xa href="#">Hone</a></li> 

<li role="presentation"><a href="#">Portfólio</a></li> 

<li role="presentation"xa href="#">Artigos</a></li> 

<li role="presentation"><a href="#">Contato</a></li> 

</ul> 


4.6.1 Aba básica 

Para criar um mecanismo de navegação do tipo abas basta acrescentar a classe 
nav-tabs ao Container ul da marcação padrão mostrada anteriormente. 

• HTML 

<ul class=''nav nav-tabs"> 

<li role="presentation" class="active"><a href=''#">Hoi i ie</ax/li> 

<li role="presentation"xa href="#">Portfólio</a></li> 

<li role="presentation"xa href="#">Artigos</a></li> 

<li role="presentati 
</ul> 

[.../c4/navegacao.html] 
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4.6.2 Aba desabilitada 

Para desabilitar uma aba defina a classe disabled para elemento li que marca o link. 


• HTML 

<ul class="nav nav-tabs"> 

<li role="presentation" class="active"xa href="#">Hone</a></lí> 

<li role="presentation"><a href="#">Portfólio</a></li> 

<li role="presentation" class="disabled"><a href="#">Artigos</a></li> 
<li role="presentat> 

</ul> 

[.../c4/navegacao.html] 


4.6.3 Aba com link dropdown 

Para criar uma aba com link dropdown defina a classe dropdown para elemento li 
que marca a aba e crie a marcação padrão para link dropdown dentro daquele 
elemento li conforme mostrado a seguir. 

• HTML 

<ul class="nav nav-tabs"> 

<li role="presentation" class="active"><a href="#">Home</a></li> 

<li role="presentation"xa href="#">Portfólio</ a></li> 

<li role="presentation" class="dropdown"> 

<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" 
aria-expanded="false"> 

Artigos <span class="caret"x/spanx/a> 

<ul class="dropdown-nenu" role="menu"> 

<Uxa h ref ="#">HTML< /a></U> 

<Uxa href="#">CSS</ax/U> 

<Uxa href="#">javascript</ax/li> 

</ul> 

</U> 

<li role="presentli> 

</ul> 

[.../c4/navegacao.html] 
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4.6.4 Abas justificadas 

Para justificar as abas defina a classe nav- justified para elemento ul Container das 
abas. Justificar tem o efeito de fazer com que as abas tenham a mesma largura e 
se estendam por toda a largura do Container no qual foram inseridas. 

• HTML 

<ul class="nav nav-tabs nav-justified"> 

<li role="presentation" class="active"><a href="#">Home</ax/U> 

<li role="presentation"><a href="#">Portfólio</a></li> 

<U role="presentation"><a href="#">Artigos</a></lí> 

<li role="prese</U> 

</ul> 

[.../c4/navegacao.html] 


4.6.5 Pills 

A marcação para criar a navegação tipo pills é idêntica à mostrada para criar tabs. 
Basta substituir a classe nav-tabs pela classe nav-pills. O exemplo mostrando todos 
os casos de navegação estudados nos itens anteriores encontra-se online. 

Observe na figura 4.5 os diferentes tipos de navegação, conforme as marcações 
mostradas no item [4.6], 



Figura 4.5 - Navegação tipos abas e pills. 
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4.7 Barra de navegação 


O Bootstrap prevê funcionalidades que permitem criar uma grande variedade de 
barras de navegação contendo não somente links, mas imagens, textos, caixas de 
busca, elementos de formulário, dropdown etc. As barras podem ainda ser fixas 
no topo ou rodapé da aplicação ou rolar com o conteúdo. Neste item veremos 
todas as possibilidades de criação de barras de navegação. 

As barras de navegação são responsivas, como são todos os componentes do 
Bootstrap. Barras de navegação são dispostas na horizontal em larguras de view- 
port acima de 768px. Abaixo desta largura as barras de navegação assumem uma 
disposição vertical típica da navegação móvel com um ícone tipo hamburger para 
revelar os links. Ao visualizar os exemplos redimensione a janela do navegador e 
observe o comportamento das diferentes barras de navegação mostradas. 

O Container geral de barras de navegação deverá ser o elemento nav, contudo se 
por qualquer motivo for necessário usar-se outro elemento, tal como um div de- 
verá ser, para ele Container, definido o par atributo/valor role="navigation" servido 
para tecnologias assistivas. 

Convém ressaltar que para possibilitar o funcionamento das barras de navega- 
ção é necessário incluir na página que receberá o botão a biblioteca j Query, o 
plugin do Bootstrap para dropdown (está no arquivo bootstrap.min.js ) conforme 
mostrado em [1.4]. 

4.7.1 Barra de navegação básica 

Trata-se de uma barra de navegação contendo um título (em geral o nome ou o 
logotipo da aplicação) e links. 

Observe a marcação típica para criar uma barra de navegação básica. 

• HTML 

1. <nav class="navbar navbar-default"> 

2. <div class="container-fluid"> 

3. <div class="navbar-header"> 

4. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 


data-target="#barraBasica"> 


5. 

6 . 
7. 


<span class="sr-only''>Toggle navigation</span> 


<span class="icon-bar"x/span> 
<span class="icon-bar"x/span> 
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8. <span class="ícon-bar"x/span> 

9. </button> 

10. <a class="navbar-brand" href="#">Site</a> 

11. </div> 

12. <div class="collapse navbar-collapse" id="barraBasica"> 

13. <ul class="nav navbar-nav"> 

14. <li class=''active"><a href="#">Hone <span class="sr-only">(current)</spanx/ax/U> 

15. <H><a href="#">PortfóUo</ax/U> 

16. <H><a href="#">Hatérias</ax/U> 

17. <H><a href="#">Contato</a></U> 

18. </ul> 

19 . </div>< ! - - /.navbar-collapse --> 

- -> 

21. </nav> 


[.../c4/barra-de- navegacao.html] 

Código comentado: 


Linha(s) Descrição 


Linhas 1 e 21 


Linha 2 


Linhas 3 e 11 

Linhas 4 a 9 
Linha 5 

Linhas 6 a 8 
Linha 10 


Elemento nav Container da barra de navegação. Definir para este Con- 
tainer as classes navbar e navbar-default. Por padrão o fundo da barra de 
navegação é em cor clara. Se definirmos a classe navbar-lnverse em lugar 
da classe navbar-default o fundo da barra será em cor escura. 

Logo após o elemento nav deve ser marcado um elemento div com classe 
Container ou container-flutd. A escolha de uma ou outra classe determina 
a largura total da barra. Se quisermos que a barra ocupe toda a largura 
da viewport, em qualquer situação, o elemento nav deve ser colocado 
como elemento-filho de body e não dentro de div.row e neste caso usa- 
-se a classe container-flutd caso contrárontainer. No exemplo disponível 
online no site do livro mostramos as duas situações. 

Container para o título do site e para o ícone hamburger que aparece 
em dispositivos móveis. 

Botão do ícone hamburger. 

Dica para tecnologias assistivas. Notar a classe sr-only mostrar este 
conteúdo somente para aquelas tecnologias. Ver [1.7], 

Classe tcon-bar para criar as três linhas do ícone hamburger. 

Título do site. O destino deste link deve ser a home-page do site. Se em 
lugar do título do site você decidir por colocar uma pequena imagem 
(20px x 20px) do logotipo ou marca do site substitua o texto do link 
por um elemento img com o endereço do logotipo. 
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Linha(s) Descrição (cont.) 

Linhas 12 a 19 Container para o elemento ul que marca os links da barra de navegação. 

Notar que o valor do atributo id deste Container é o mesmo do atributo 
data-target do botão na linha 4. 

Linhas 14 Marcar dinamicamente o elemento li Container do link para a página 

atual com a classe active estiliza o link diferenciadamente indicando 
visualmente que aquele link é o da página atual. Neste caso use a 
classe sr-only (ver [1.7]) para fornecer a mesma indicação às tecnologias 
assistivas. Marca os links da barra de navegação. Notar que o valor do 
atributo id deste. 

O exemplo prático mostrando a construção de barras de navegação básicas 
encontra-se disponível, no site do livro, para consulta online. Ao visualizar o 
exemplo redimensione a janela do navegador para observar o comportamento 
da barra em dispositivos com pequenas larguras de viewport (abaixo de 768px). 

Observe na figura 4.6 os diferentes tipos de barra de navegação, conforme as 
marcações mostradas no item [4.7.1]. 


Site Home Portfólio Matérias Contato 

Barra navbar-default 

Site Home Portfólio Matérias Contato 

Barra navbar-default com logotipo 
H Home Portfólio Matérias Contato 

Barra navbar-inverse 


Site Home Portfólio Matérias Contato 


Figura 4.6 - Barra de navegação básica. 


4.7.2 Barra de navegação fixa 

Por padrão a barra de navegação rola acompanhando a rolagem da tela. As classes 
navbar-fixed-top e navbar-fixed-botton quando declaradas para o elemento nav que marca 
a barra faz com que ela, barra permaneça fixa na borda superior ou na borda 
inferior da tela, ou seja, não rola com a tela. 
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Observe a marcação típica para criar uma barra de navegação fixa. 

• HTML 

<nav class="navbar navbar-default navbar-fixed-top"> /* Fixa na borda superior da tela */ 


ou 


<nav class="navbar navbar-default navbar-fixed-button"> /* fixa na borda inferior da tela */ 


[.../c4/barra-de-navegacao-fixa.html] 

O exemplo prático mostrando a construção de barras de navegação fixas encontra- 
-se disponível, no site do livro, para consulta online. Ao visualizar o exemplo 
redimensione a janela do navegador para observar o comportamento da barra 
em dispositivos com pequenas larguras de viewport (abaixo de 768px). 

Observe na figura 4.7 as barras de navegação fixas, conforme as marcações mos- 
tradas no item [4.7.2], 


Site Home Portfólio Matérias Contato 

bla ..bla . bla. . 
bla bla ...bla... 
bla. .bla. .bla... 
bla bla . bla . 
bla. bla. bla... 
bla. ..bla. bla... 
bla bla bla 

Site Home Portfólio Matérias Contato 


I 


Figura 4.7 - Barra de navegação fixa. 


Alerta: A altura padrão de uma barra de navegação é de 50px. Assim, quando se 
prevê barra de navegação fixa na página é necessário que se declare explicitamente 
para o elemento body da página um padding-top de 50px. 
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4.7.3 Barra de navegação com caixa de busca 

É prática comum e amplamente utilizada inserir uma caixa de busca na barra de 
navegação. O Bootstrap prevê a classe navbar-fora a ser declarada no elemento fora, 
Container da caixa de busca, para essa inserção. Adicionalmente use as classes 
gerais navbar-left e navbar-right para posicionar a caixa de busca à esquerda ou à 
direita da barra de navegação respectivamente. 

A marcação HTML típica para inserir uma caixa de busca em uma barra de na- 
vegação é mostrada em destaque a seguir. 

• HTML 

<nav class="navbar navbar-default"> 

<div class=''collapse navbar-collapse" id="barraConBusca"> 

<fom class="navbar-forn navbar-right" role="search"> 

<div class="forpi-group"> 

<input type="text" class="fom-control" placeholder="Search"> 

</div> 

<button type="submit" class=" 

</forn> 

</nav> 

[.../c4/barra-navegacao-com-complementos.html] 


4.7.4 Barra de navegação com botão 

O Bootstrap prevê a classe navbar-btn a ser declarada no elemento button para inserir 
um botão na barra de navegação. Adicionalmente use as classes gerais pull-left e 
pull-right para posicionar o botão à esquerda ou à direita na barra de navegação 
respectivamente. 

A marcação HTML típica para inserir um botão em uma barra de navegação é 
mostrada em destaque a seguir. 

• HTML 

<nav class="navbar navbar-default"> 

</ul> 
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<button type="button" class="btn btn-default navbar-btn pull- right">Login</button> 
</div><! - - /.navbar-collapse --> 

</nav> 

[.../c4/barra-navegacao-com-complementos.html] 


4.7.5 Barra de navegação com link dropdown 

A funcionalidade link dropdown foi estudada no item [4.6.3] e aplica-se as barras 
de navegação. Para estilizar dropdown está prevista uma marcação HTML padrão. 
A classe dropdown deve ser declarada para o elemento li que marca o link dropdown. 

A marcação HTML típica para criar um link dropdown em uma barra de nave- 
gação é mostrada em destaque a seguir. 

• HTML 

<nav class="navbar"> 


<li class="active"><a href="#">Hone <span class="sr-only">(current)</spanx/a></U> 
<H><a href="#">Portfólío</ax/li> 

<U class="dropdown"> 

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
aria-expanded="false">Artigos <span class="caret"x/spanx/a> 

<ul class="dropdown-menu" role="menu"> 

<Uxa href="#">HTML</ax/li> 

<Uxa href="#">CSS</ax/U> 

<Uxa href="#">javascript</ax/ll»Contato</ax/U> 


</nav> 

[.../c4/barra-navegacao-com-complementos.html] 


4.7.6 Barra de navegação com texto 

Para inserir um texto em uma barra de navegação use o elemento p (parágrafo) 
e a ele defina a classe navbar-text. Use as classes gerais pull-left e pull-right para 
posicionar o botão à esquerda ou à direita na barra de navegação respectivamente. 

A marcação HTML típica para criar textos em uma barra de navegação é mostrada 
em destaque a seguir. 
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<nav class="navbar"> 

<U class="active l, xa href="#">Home <span cLass="sr-only">(current)</spanx/a></U> 
<H><a href="#">Portfólío</ax/U> 

<U><a href="#">PortfóUo</ax/ll> 

</ul> 

<p class="navbar-text pull-right">Site criado pelo <a href="http://niaujor.con">Maujor</a></p> 

/div>< ! - - /.navbar-collapse --> 

</nav> 

[.../c4/barra-navegacao-com-complementos.html] 

Observe na figura 4.8 os complementos para barras de navegação, conforme as 
marcações mostradas no itens [4.73], [4.7.4], [4.7.5] e [4.7.6], 


Barra com caixa de busca 

Site Home Portfólío Matérias Contato Busca OK 


Barra com botão 

Site Home Portfólío Matérias Contato Login 


Barra com link dropdown 

Site Home Portfólío Artigos * Contato 


Barra com texto 

Site Home Portfólío Matérias Contato Site criado pelo Maujor 


Figura 4.8 - Barra de navegação com complementos. 


4.8 Caminho de navegação 

Para criar um caminho de navegação, também conhecido pela sua designação 
em inglês breadcrumb (literalmente: migalhas de pão), usamos como Container 
um elemento ol ao qual declaramos a classe breadcrunb. Os itens da lista marcam 
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os links no caminho e na sequência em que aparecem na marcação. Use a classe 
active para destacar o texto do link para a página atual. 

A marcação HTML típica para criar um caminho de navegação é conforme mos- 
trada no código a seguir. 

• HTML 

<ol class="breadcrumb"> 

<H><a href="#">Serviços</a></li> 

<ü><a href="#">active">Aplicações web</ü> 

</ol> 

[.../c4/breadcrumb-paginacao-la bel-badge.html] 


4.9 Paginação 

Para criar um widget de paginação usamos como Container geral o elemento 
nav. Dentro deste elemento usamos um elemento ul ao qual declaramos a classe 
pagination. Esse elemento é o Container para uma lista contendo os números das 
páginas a navegar e os ícones para os links ‘Anterior” e “Próxima”. 


4.9.1 Widget de paginação básica 

A marcação HTML típica para criar um widget de paginação básica é conforme 
mostrada no código a seguir. 

• HTML 


<nav> 

<ul class="pagination"> 

<li><a href="#" aría-label="Anterior"><span aria-hídden="true">&laquo;</spanx/ax/U> 
<U><a href="#">l</ax/U> 

<U><a href="#">2</a></U> 

<U>a href="#">3</ax/U> 

<U><a href="#">4</a></U> 

<U><a href="#">5</ax/U> 

<U><a href="#" aría-label="Próxaquo;</spanx/ax/U> 

</ul> 

</nav> 

[.../c4/breadcrumb -paginacao-label-badge.html] 
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Por padrão o widget de paginação é posicionado à esquerda. Declarar no Container 
nav as classes text-center ou pull-right faz com que o widget seja posicionado no 
centro ou à direita respectivamente. 


4.9.2 Dimensionamento do widget paginação 

O widget de paginação tem dimensões padrão. Declarar no Container ul as classes 
pagination-lg ou pagination-sn permite que se obtenha mais duas dimensões para 
o widget. 

A marcação HTML típica para criar os três tamanhos de widget de paginação é 
conforme mostrada no código a seguir. 

• HTML 


<nav> 

<ul class="pagination pagination-Lg"> <!-- tananho naior --> 

<U><a href="#" aria-label="Anteríor"><span aria-hidden="true">&laquo;</spanx/a></U> 


ou 


<nav> 

<ul class="pagination"> <!-- tananho padrão --> 

<U><a href="#" aria-label="Anterior"xspan aria-hidden="true">&laquo;</spanx/ax/U> 


ou 


<nav> 

<ul class="pagination pagination-sn"> <!-- tananho nenor --> 

<lixa href="#" aría-label="Anteríor"xspan aria-hidden="true">&laquo;</spanx/ 
a></U> 


4.9.3 Estado dos links 

Os links que remetem às páginas são estilizados, por padrão, na cor branca no 
estado em repouso e na cor cinza clara no estado nouseover. O Bootstrap prevê 
as classes active e disabled a serem declaradas no elemento li, Container do link, 
e que se destinam respectivamente a indicar visualmente a página corrente e a 
desabilitar um link. 
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A marcação HTML típica para aplicação dessas classes é conforme mostrada a seguir. 


• HTML 


<nav> 

<ul class="pagination"> 

<li class="disabled''><a href="#" aria-label="Anterior"xspan aria - hidden=" true"> 
&#171; spanx/a></U> 

<U><a href="#">l</ax/U> 

<U><a href="#">2</a></U> 

<lí class="active">a href="#">3</a></U> 

<U><a href="#">4</a></U> 

<U><a href="#">5</a></U> 

<lixa href="#" aria-laberue">&#187;</spanx/ax/U> 

</ul> 

</nav> 

[.../c4/breadcrumb-paginacao-label-badge.html] 

Notar o uso opcional das entidades HTML &#171; para o link Anterior e &#187; 
para o link Próximo em lugar de &laquo; e &raquo; respectivamente. 


4.9.4 Pager 

Os links que remetem às páginas anterior e próxima são chamados de pager. O 
Bootstrap prevê a classe pager a ser declarada no elemento ul, Container dos dois 
links. Os links são estilizados como botões com bordas arredondadas e por pa- 
drão são posicionados no centro da página. O Container geral do pager deve ser 
um elemento nav. 

É possível posicionar um link à esquerda e outro à direita do Container com uso 
das classes previous e next respectivamente no elemento li Container do link. Para 
desabilitar um link use a classe disabled no elemento li. 

A marcação HTML típica para criar o widget pager é conforme mostrada no 
código a seguir 
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<nav> 

<ul class="pager"> 

<U><U><a href="#">Próxína</a></li> 
</ul> 

</nav> 

[.../c4/breadcrumb-paginacao-label-badge.html] 


4.10 Rótulos e marcadores 

Para criar rótulos estilizados com seis cores diferentes o Bootstrap prevê a decla- 
ração da classe de estilização geral labei e das classes para colorir label-default, 
label-prinary, label-success, label-info, label-warníng e label-danger a serem declaradas 
em um elemento span contendo o rótulo. 

Para criar marcadores o Bootstrap prevê a declaração da classe de estilização badge 
a ser declarada em um elemento span contendo o marcador. Por padrão o rótulo é 
inserido em um pequeno retângulo cinza com bordas arredondadas e na cor branca. 

A marcação HTML típica para criar rótulos e marcadores é conforme mostrada 
no código a seguir: 

• HTML 

<nav> <!-- Rótulos --> 

<ul class="pager"> 

<U><a href="#">Anterlor</ax/ll> 

<U><a href="#">Próxina</a></li> 

</ul> 

</nav> 

<hl>Artigoshl> 

<h6>Menssagens <span class="badge">358</span></h6> 

[.../c4/breadcrumb-paginacao-label-badge.html] 

Observe na figura 4.9 os widgets, conforme as marcações mostradas no itens [4.8] , 
[4.9], [4.10] e [4.11], 
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Breadcrumb 


Paginação básica 


Serviços Aplicações Aplicações web 


«1 2 3 4 

5 » 

Dimensão pagination-lg 

Dimensão padrão 


Dimensão pagination-sm 

« 1 2 3 4 5 » 

«12 3 4 

5 » 

« 1 2 3 4 5 » 

Classes disabled e active 

Pager padrão 


Pager nos lados do Container 

2 4 5» 

Anterior 

Próxima 

Anterior Próxima 

Rótulos 


Marcadores 

Artigos © 

Menssagens »!-f 



Figura 4.9 - Widgets. 


4.11 Jumbotron 

A palavra Jumbo Tron foi inventada pela Sony para designar uma invenção que 
conhecemos como “Telão”, presentes em locais de grandes eventos como campos 
de futebol e estádios para shows. 

No Bootstrap o widget jumbotron é uma espécie de “telão” estilizado por padrão 
com bordas e fundo cinzas destinado a destacar conteúdos. 

É possível obter-se dois tipos de jumbotron conforme mostrados a seguir. 

4.11.1 Jumbotron básico 

Jumbotron básico é aquele cuja largura é igual à largura do seu Container na 
página, ou seja, não se estende necessariamente por toda a largura da tela. Para 
criar um jumbotron usa-se um elemento Container com a classe junbotron. 

A marcação HTML típica para criar o widget jumbotron básico é conforme mos- 
trada no código a seguir: 
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<div class="jimbotron"> 

<hl>Junbotron básico</hl> 

<p>Loren ipsum...</ btn-lg" href="#" role="button">Saiba mais</a></p> 
</div> 

[.../c4/jumbotron.html] 


4.11.2 Jumbotron estendido 

Jumbotron estendido é aquele cuja largura é igual à largura da tela. Para obter 
este tipo de jumbotron ele deve ser marcado fora do div. Container que contém toda 
a marcação do Boostrap, ou seja, deverá ser elemento filho de body. Além disso, 
deverá ser criado um div. Container elemento-filho de div. junbotron. 

A marcação HTML típica para criar o widget jumbotron estendido é conforme 
mostrada no código a seguir: 

• HTML 


<div class="junbotron"> 

<di v class="container"> 

<hl>Junbotron estendido</hl> 

<p>Loren ipsun. . ,</p> 

<pg" href="#" roie="button''>Saiba mais</a></p> 

</div> 

</div> 

[.../c4/jumbotron.html] 

Observe na figura 4.10 os widgets, conforme as marcações mostradas no itens 
[4.11.1 e [4.11.2], 
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Jumbotron estendido 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, 
ante augue malesuada mi, id rhoncus augue lorem eget elit. 


Saiba mais... 


Jumbotron básico 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis 
laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. 


Saiba mais... 


Figura 4.10 - Jumbotron. 


4.12 Page-header 

O Bootstrap prevê a classe page-header para ser definida em um elemento Contai- 
ner para um título. O efeito desta classe é o de estilizar o título com uma borda 
inferior e margens. 

A marcação HTML típica para criar estilizar títulos com uso de page-header é 
conforme mostrada no código a seguir: 

• HTML 

<div class="page-header"> 

ge-header</code> <smaU> com texto menor</smaU></hl> 

</div> 

[.../c4/jumbotron.html] 

O exemplo desta funcionalidade encontra-se na mesma página que demonstra 
o jumbotron. 
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Thumbnail é uma palavra inglesa que em tradução livre significa unha do po- 
legar, mas é usada também para designar uma coisa curta ou pequena. E é com 
este sentido que ela se aplica ao jargão empregado em desenvolvimento web. Em 
resumo no nosso contexto seu significado é: miniatura. 

Normalmente um thumbnail é uma miniatura de uma imagem, vídeo, texto ou um 
conteúdo qualquer que quando clicada leva o usuário à sua forma em tamanho 
real. O exemplo padrão e mais comum do uso de thumbnails na web é aquele no 
qual é apresentado ao usuário um grid de imagens em miniaturas que quando 
clicadas acessam a imagem em seu tamanho real. 


4.13.1 Thumbnail padrão 

O Bootstrap prevê a classe thunbnail para ser definida em um elemento âncora a 
que servirá de Container para o elemento ing que contém o thumbnail. Para dispor 
os thumbnails lada a lado use o grid. 

A marcação HTML típica para criar um grid de thumbnails é conforme mostrada 
no código a seguir: 

• HTML 

<div class="col -nd -3 col-sn-6"> 

<a href="tl . jpg" class="thumbnail"><ing src="tl. jpg" alt=''carrol"></a> 

</div> 

<div class="col -nd - 3 col-sn-6"> 

<a href="t2. jpg " class="thunbnail"><ing src="t2.jpg" alt=" carro2"></a> 

</div> 

<div class="coTi"id-3 col-sn-6"> 

<a href="t3 . jpg " class="thunbnail"><ing src="t3 .jpg" alt=" carro3"></a> 

</div> 

<div class="col -nd class="thunbnail"><ing src="t4. jpg" alt=" carro4"></a> 

</div> 

[.../c4/thumbnail.html] 
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4.13.2 Thumbnail com conteúdos 

O Bootstrap oferece funcionalidades para criação de thumbnails com conteúdos 
que resultam em widgets com finalidades diferentes daquela de simplesmente 
linear para uma imagem em tamanho real. 

O exemplo mais comum de um desses widgets é aquele usado em uma página 
de um site de vendas online contendo thumbnails mostrado a imagem de um 
produto e a seguir textos designando e descrevendo o produto, com link para 
informações adicionais. 

Existe a opção de inserir conteúdo no thumbnail. Neste caso retira-se o link da 
imagem do thumbnail e cria-se um Container para os conteúdos a inserir. Esse 
Container deverá receber a classe caption. 

A marcação HTML típica para criar um thumbnail com conteúdos é idêntica 
à marcação mostrada anteriormente com as alterações conforme mostrada no 
código a seguir: 

• HTML 

<div class="col-md-3 col-sm-6"> 

<div class="thumbnaU"> 

<a h r ef = "tl.jpg" class = "thumbnail"x ing src="tl.jpg" alt="carrol"></a> 

<div class="caption"> 

<h3>Descrição da Lrnagern</h3> 

<p>Lorem ipsum dolor...</p> 
href-'#" role="button">Saiba mais. . ,</a></p> 

</div> 

</div> 


[.../c4/thumbnail.html] 

Observe na figura 4.11 os thumbnails conforme as marcações mostradas. 
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Thumbnail 



Thumbnail com conteúdo 



Descrição da imagem 

Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. Morbi 
eleifend. purus quis laoreet faucíbus. 
ante augue malesuada 




Descrição da imagem 

Lorem ipsum dolor sit amet. 
consectetuer adipiscing elit. Morbi 
eleifend. purus quis laoreet faucibus, 
ante augue malesuada. 


Saiba 



■ 

Descrição da imagem 


Lorem ipsum dolor sit amet. 
consectetuer adipiscing elit. Morbi 
eleifend. purus quis laoreet faucibus, 
ante augue malesuada. 



Descrição da imagem 

Lorem ipsum dolor sit amet. 
consectetuer adipiscing elit. Morbi 
eleifend, purus quis laoreet faucibus. 
ante augue malesuada. 



Figura 4.11 - Thumbnail. 


4.14 Caixas de alerta 

O Boostrap prevê a criação de caixas contendo mensagem ao usuário. Essas caixas 
podem ser estilizadas de quatro formas conforme a natureza da mensagem (mensa- 
gem de erro, mensagem de sucesso, mensagem de alerta e mensagem informativa). 

As caixas de mensagem têm bordas arredondadas, fundo e texto estilizados em 
tons de cor conforme a natureza da mensagem. 

A marcação típica para criar uma caixa de alerta consta de um div Container ao 
qual se atribui a classe alert e o par atributo/valor role="alert". 

As classes alert-success, alert-info, alert-warning e alert-danger a serem marcadas no 
Container estilizam a caixa do alerta com a cor apropriada de sucesso (verde), 
informação (azul), alerta (amarela) e erro (salmão). 

Para criar um botão para fechar a caixa de alerta usa-se a classe alert -disnissible 
no cantainer e dentro dele marca-se um elemento button do com a classe close, o 
par atributo/valor data-disniss="alert". 
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Para criar um link dentro da caixa de alerta use a classe alert-Unk no elemento 
a que marca o link. 

A marcação HTML típica para criar uma caixa de alerta com todas as funciona- 
lidades descritas é conforme mostrada no código a seguir: 

• HTML 

<div class="alert alert-success alert-dismissible" role="alert"> 

<button type="button" class="close" data-disniss="alert" aria-label="Fechar"> 

<span aria-hidden="true">&times;</span> 

</button> 

<p><strong>Atenuma 

<a href="#" class="alert-link">nensagen de alerta. </a> 

</p> 

</div> 

[.../c4/caixa-de-alerta.html] 


4.15 Barra de progresso 

Barra de progresso é um widget destinado a oferecer uma indicação visual ao 
usuário do andamento de uma tarefa tal como o download de um arquivo. 

Este widget usa as funcionalidades de transição e animação das CSS3 que não 
são suportadas pelos IE9 e anteriores bem como por versões antigas do demais 
navegadores navegadores. 

A marcação típica para criar uma barra de progresso básica consta de um div 
Container ao qual se define a classe progress e um div elemento-filho ao qual se 
define os seguintes atributos com seus respectivos valores: 

Atributo Valor -Finalidade 


class 

role 

aria-valuenow 

aria-valuemin 

aria-valuemax 

style 


progress-bar - Servir de âncora para estilização. 

progressbar-Atributo destinado a definir o valor semântico do elemento 
div. 

número - Indica o valor atual do progresso da tarefa, 
número - Indica o valor mínimo medido pela barra, 
número - Indica o valor máximo medido pela barra. 

width em porcentagem - Indica visualmente o valor do progresso da 
tarefa. 
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Os atributos role e aria-* visam a incrementar a acessibilidade da barra de progresso. 

A porcentagem de progresso na barra é obtida com declaração inline para a pro- 
priedade wldth, expressa em porcentagem. 

Declara-se o progresso da tarefa dentro de um elemento span ao qual se atribui a 
classe sr-only com a finalidade de fazê-lo acessível somente à tecnologias assistivas. 

A marcação para criar uma barra de progresso básica é conforme mostrado a seguir. 

• HTML 

<div class="progress"> 

<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" 
aria-valuenax="100'' style="width: 60%; "> 

<span class="sr-only">60% Complete</span> 

</div> 

</div> 

Essa marcação renderiza uma barra de progresso padrão cuja faixa indicativa do 
progresso da tarefa é estilizada em gradiente na cor azul escura. 

Para obter barras de progresso estilizadas nas cores azul claro, verde, laranja e 
vermelho basta declarar no div.progress-bar as classes progress-bar-info, progress-bar- 
success, progress-bar-warning e progress-bar-danger, respectivamente. 

Para obter barras de progresso estilizadas segundo o efeito zebra, basta declarar 
no div.progress-bar a classe progress-bar-striped. 

Para obter barras de progresso estilizadas segundo o efeito zebra e animadas, 
basta declarar no div.progress-bar as classes progress-bar-striped e active. 

Para obter barras de progresso múltiplas, basta acrescentar elementos-filho no 
Container da barra. 

A marcação HTML mostrada a seguir esclarece a obtenção desses diferentes tipos 
de barra de progresso: 

• HTML 

<div class="row"> 

<div class="col-md-6"> 

<h4>Barras de progresso com cor em gradiente</h4> 

<div class=''progress"> 

<div class="progress-bar" role="p ro 9 ress t> ar " aria-valuenow="60" aria-valuenin=''0" 
aria-valuemax="100" style="width: 60%; "> 
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<span ctass="sr-only">60% Cornplete</span> 

</div> 

</div> 

<div ctass="progress"> 

<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" 
aria-valuenin="0" aria-valuenax="100" style="width: 40%; "> 

<span ctass="sr-only">40% Cornplete</span> 

</div> 

</div> 

<div ciass="progress"> 

<div class="progress-bar progress-bar-success'' roie="progressbar" 

aria-valuenow="80" aria-valuenin="0" aria-valuenax="100" style="width: 80%; "> 
<span class=''sr-only">80% Conplete</span> 

</div> 

</div> 

<div ciass="progress"> 

<div class="progress-bar progress-bar-warning" role="progressbar" 

aria-valuenow="30" aria-valuenin="0" aria-valuenax="100" style="width: 30%; "> 
<span class="sr-only">30% Conplete</span> 

</div> 

</div> 

<div ctass="progress"> 

<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" 
aria-valuepiin="0" aria-valuer r iax="100" style="width: 50%; "> 

<span ciass="sr-only">50% Complete</span> 

</div> 

</div> 

<div class="col-md-6"> 

<h4>Barra de progresso con efeito zebra</h4> 

<div class="progress"> 

<div class="progress-bar'' role="progressbar progress-bar-striped" 

aria-valuenow="60" aria-valuenin="0" aria-valuenax="100" style="width: 60%; "> 
<span class="sr-only">60% Conplete</span> 

</div> 

</div> 

<div ctass="progress"> 

<div class="progress-bar progress-bar-info progress-bar-striped ' 1 roie="progressbar" 
aria-vaiuenow="40" aria-valuenin="0" aria-vatuemax="100" styie="width: 40%; "> 
<span ctass="sr-only">40% Conpiete</span> 

</div> 
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</div> 

<div class="progress"> 

<div class="progress-bar progress-bar-success progress-bar-striped" 

role="progressbar" aria-valuenow="80" aria-valuenin="0" aria-valuernax="100" 
style="width: 80%; "> 

<span class=''sr-only">80% Conplete</span> 

</div> 

</div> 

<div class="progress"> 

<div class="progress-bar progress-bar-warning progress-bar-striped" 

role="progressbar" aria-valuenow="30" aria-valuenin="0" aria-valuemax="100" 
style="width: 30%; "> 

<span class="sr-only">30% Conplete</span> 

</div> 

</div> 

<div class="progress"> 

<div class="progress-bar progress-bar-danger progress-bar-striped" 

role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuenax="100" 
style="width: 50%; "> 

<span class="sr-only">50% Conplete</span> 

</div> 

</div> 

</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-6"> 

<h4>Barra de progresso aninada</h4> 

<div class="progress"> 

<div class="progress-bar progress-bar-danger progress-bar-striped active" 
role="progressbar" aria-valuenow="50" aria-valuenin="0" aria-valuenax="100" 
style="width: 50%; "> 

<span class="sr-only">50% Conplete</span> 

</div> 

</div> 

<div class="col-md-6"> 

<h4>Barra de progresso múltipla</h4> 

<div class="progress"> 

<div class="progress-bar progress-bar-danger progress-bar-striped " 

role="progressbar" aria-valuenow="40" aria-valuenin="0" aria-valuenax="100" 
style="width: 40%; "> 
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<span class="sr-only">40% Complete</span> 

</div> 

<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="35" 
aria-valuenin="0" aria-valuenax="100" style="width: 35%; "> 

<span class="sr-only">35% Conplete</span> 

</div> 

<div class="progress-bar progress-bar-warning" role="progressbar" 

aria-valuenow="10" aria-valuenin="0" aria-valuenax="100" style="width: 10%; "> 
<span class="sr-only">10°/ó Coriplete</span> 

</div> 

</div> 

</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class="col-nd-6"> 

<h4>Barras de progresso con rótulo</h4> 

<div class="progress"> 

<div class="progress-bar" role="progressbar" aria-valuenow="6ax="100" 
style="width : 60%; "> 

60% 

</div> 

</div> 

</div> 

</div> <!-- /.row --> 

[.../c4/barra-de-progresso.html] 

Na figura 4.12, mostramos a renderização das barras de progresso, conforme 
marcação HTML anterior. 



Figura 4.12 - Barras de progresso. 
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4.16 Objetos de mídia 

As funcionalidades do Bootstrap para marcação de objetos de mídia destinam- 
-se a criar componentes do tipo cometários em blogs, tweets etc. cujo padrão de 
apresentação baseia-se na inserção de uma imagem à esquerda ou à direita de 
um conteúdo textual descritivo da mídia. 

A marcação padrão para esse componente usa três elementos div conforme des- 
critos a seguir. 

• Elemento div Container geral ao qual atribui-se a classe nédia. 

• Elemento-filho div ao qual atribui-se a classe nedia-body destinado a marcar 
conteúdos textuais que se destinam a descrever a mídia. O elemento hl-h6 
que marca o título do texto descritivo deverá receber a classe nedia-heading. 

• Elemento-filho div destinado a servir de Container para a mídia e ao qual 
atribui-se a classe nedia-left ou media- right conforme se queira posicionar a 
mídia à esquerda ou à direita do conteúdo descritivo da mídia. Este elemento 
deverá ser posicionado na marcação antes do div. nedia-body se o alinhamento 
for à esquerda ou depois do div. nedia-body se o alinhamento for à direita. Ao 
elemento que marca a mídia (ing, video, canvas etc.) define-se a classe nedia-object. 

Por padrão o topo da mídia é alinhado com o topo do texto descritivo. Pode- 
mos alterar este alinhamento definindo as classes media -middle ou media-bottom no 
div. nedia-body. Estas classes se destinam a alinhar verticalmente a mídia no centro 
ou na parte inferior, respectivamente, do texto descritivo. 

O exemplo mostrado a seguir esclarece a marcação HTML e o uso destas classes. 

• HTML 

<div class="media"> <!-- nidia à esquerda --> 

<div class="media-left" href="#"> 

<img class="media-object" src="64x64.gif" alt=""> 

</div> 

<div class="media-body"> 

<h4 class="nedia-heading">Titulo</h4> 

<p>...</p> 

</div> 

</div> 

<div class="media"> <!-- nidia à direita --> 

<div class="media-body"> 

<h4 class="nedia-heading">Titulo</h4> 
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<p>...</p> 

</div> 

<div class="piedia-right" href="#"> 

<ing class="piedia-object" src="64x64.gif" alt=""> 
</div> 

</div> 

<div class="nedia"> <!-- alinhanento vertical no meio --> 
<div class="media-left media-middle" href="#"> 

<img class="media-object" src="64x64.gif" alt=""> 
</div> 

<div class="media-body"> 

<h4 class="media-heading">Titulo</h4> 

<p>...</p> 

</div> 

</div> 

<div class="media"> <!-- alinhamento vertical inferior --> 
<div class="media-left media-bottom" href="#"> 

<img class="media-object" srdiv class="media-body"> 
<h4 class="media-heading">Titulo</h4> 

<p>...</p> 

</div> 

</div> 


[.../c4/objetos-de-midia-1.html] 

Na figura 4.13, mostramos a renderização dos objetos de mídia, conforme a mar- 
cação HTML mostrada anteriormente. 


Exemplo de mídia alinhada à esquerda 

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin commodo. Cras purus odio, 
vestibulum in vulputate at, tempus viverra turpis. 


Exemplo de mídia alinhada à direita 

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin commodo. Cras purus odio, 
vestibulum in vulputate at. tempus viverra turpis. 


64x64 


64x64 


Exemplo de mídia alinhada verticalmente no 
meio 

64x64 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin commodo. Cras purus odio, 
vestibulum in vulputate at, tempus viverra turpis. 


Exemplo de mídia alinhada verticalmente 
embaixo 


64x64 


Cras sit amet nibh libero, in gravida nulla. Nulla vel metus 
scelerisque ante sollicitudin commodo. Cras purus odio, 
vestibulum in vulputate at, tempus viverra turpis. 


Figura 4.13 - Alinhamento de objetos de mídia. 

Opcionalmente podemos inserir objetos de mídia com uso de elementos para 
marcação de listas que podem ser aninhados, conforme a estrutura HTML geral 
mostrada a seguir. 


Conheça os livros do Maujor: http://livrosdomaujor.com.br 



Capítulo 4 ■ Componentes 
• HTML 


149 


<ul class="nedia-Ust"> 

<11 class="piedla"> 

<div class="piedla-left" href="#"> 

<lng class="nedia-object" s rc= " 64x64 . gif " alt=""> 

</div> 

<div class="piedla-body"> 

<h4 class="nedla-heading">Título</h4> 

<p>...</p> 

<div class="piedla"> <!-- nídia aninhada --> 

<div class="nedia-left" href="#"> 

<ing class="nedia-object" src="64x64.gif" alt="a-body"> 
<h4 class="media-heading">Título aninhado</h4> 

<p>. . .</p> 


</U> 

</ul> 

[.../c4/objetos-de-midia-2.html] 

Na figura 4.14, mostramos a renderização dos objetos de mídia aninhados, con- 
forme a marcação HTML mostrada anteriormente. 


Título 

Cras slt amet nibh libero, in gravida nulla. Nulla vel metus scelerlsque ante sollicitudin commodo. Cras 
purus odio, vestibulum in vulputate at, tempus viverra turpis. 

Título para mídia aninhada - nível 1 

64x64 Cras slt amet nibb libero, in gravida nulla Nulla vel metus scelerisque ante sollicitudin 
commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 

Título para mídia aninhada - nível 2 

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerlsque ante 
sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra 
turpis. 

Título para mídia aninhada - nível 1 

64x64 Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin 
commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. 


64x64 


Figura 4.14 - Objetos de mídia aninhados. 
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4.17 Agrupamento de itens de listas 

Denomina-se agrupamento de itens de listas um componente do Bootstrap cuja 
finalidade é criar estilização diferenciada para as listas da HTML. 

A marcação HTML para criar uma apresentação básica deste componente é con- 
forme mostrada a seguir. 

• HTML 

<ul class="Ust-group"> 

<11 class="Ust-group-iten">Abacate</ll> 

<11 class="Ust-group-iteiV'>Caranbola</U> 

<U class="Ust-group-iten">Flgo</ll> 

<U class="Ust-group-iten">Uva</ll> 

</ul> 

E possível inserir um “badge” (termo inglês que neste contexto significa marcador 
e se destina a fornecer informação adicional) em cada item da lista. Por padrão o 
identificador é posicionado à direita do texto do item da lista. 

A marcação HTML para criar um marcador em itens da lista é conforme mos- 
trada a seguir. 

• HTML 

<ul class=''list-group"> 

<11 class="Ust-group-iten"> <span class="badge">14</span> Abacate</U> 

<11 class="llst-group-lten"> <span class="badge">fora de época</span> Caranbola</ll> 
<11 class="llst-group-lten''> <span class="badge">345</span> Flgo</ll> 

<11 class="llst-group-ltem''> <span class="badge">em falta</span> Uva</ll> 

</ul> 

Para criar uma lista de links use um Container dlv em lugar do elemento ul e ele- 
mentos a em lugar de 11 conforme marcação HTML mostrada a seguir. 

• HTML 

<dlv class="llst-group"> 

<a class="llst-group-ltem active 1 ' href="#">Slte do Maujor</a> 

<a class="llst-group-ltem" href="#">Wlklpedla português</a> 

<a class="llst-group-ltem dlsabled" href="#">Slte do W3C</a> 

<a class="llst-group-ltem" href="#">Google</a> 

</dlv> 
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Para criar uma lista de botões com efeito rollover use um Container div em lugar 
do elemento ul e elementos button em lugar de li conforme marcação HTML 
mostrada a seguir. 

• HTML 

<div class="list-group''> 

<button type=" button" class="Ust-group-item">Arquivo</button> 

<button type=" button" class="list-group-iten">Inserir«/button> 

«button type=" button" class="list-group-item">Copiar«/button> 

«button type=" button" class="list-group-iter , i">Enviar«/button> 

</div> 

As classes contextuais se destinam a estilizar um item da lista nas cores verde, azul 
claro, amarela e vermelha, cor esta que transmite a ideia do contexto do item. As 
classes para definir as cores citadas são list-item-success, Ust-iten-info, list-iten-warning 
e Ust-item-danger, respectivamente, conforme a marcação HTML mostrada a seguir. 

• HTML 

«ul class="list-group"> 

«li class="list-group-iten list-group-item-success">Arquivo enviado ! </li> 

«li class="list-group-item list-group-iteni-info">Use o fornato JPC«/li> 

«li class="list-group-iten list-group-item-warning">Está faltando un arquivo«/li> 

«li class="list-group-iten list-group-iteni-danger">Poderá conter virus«/li> 

</ul> 

Para desabilitar um item da lista use a classe disabled no elemento que marca o 
item. Itens desabilitados são renderizados com fundo na cor cinza. No exemplo 
que mostra a lista de links o item “Site do W3C” foi desabilitado. 


Dica: As classes contextuais e as classes active e disabled podem ser usadas 
em qualquer um dos agrupamentos de itens mostrados anterioos diferentes 
agrupamentos de itens de lista conforme as marcações HTML anteriores encontra- 
se em [.../c4/agrupamento-de-itens-de-lista.html]. 


Na figura 4.15, mostramos a renderização destes agrupamentos de itens de lista. 
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Agrupamento básico Itens com "badge" (marcadores) 

Abacate o 

Carambola 
Figo 
Uva 

Agrupamento de botões Classes contextuais Lista com conteúdo personalizado 

Arquivo enviado! 

Use o formato JPG 
Está faltando um arquivo 
Poderá conter virus 

Especificações do W3C para 
construção de layouts 

Nessa matéria você irá conhecer o 

aruiamgntn dag pgn^rifirapnpg rln 


A função calc() das CSS 

A função calc() das CSS permite que se 
definam valores CSS com uso de 
expressões matemáticas, ou seja, o 
valor adotado para a propriedade é o 
resultado de uma expressão 
matemática 


Arquivo 

Inserir 

Copiar 

Enviar 


Abacate 

Carambola 

Figo 

Uva 


Agrupamento de links 



Figura 4.15 -Agrupamento de itens de lista. 


4.18 Painéis 

Painel é o componente do Bootstrap destinado a criar um box para conteúdos. 
O box é estilizado com bordas em cantos arredondados e seu fundo e conteúdos 
recebem estilização definida por classes específicas. 

A marcação HTML para criar um painel básico é conforme mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class="panel-body"> 

<p>Conteúdo textual do painel básico - Loren ...</p> 

</div> 

</div> 

A marcação HTML para criar um painel com título é conforme mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class="panel-heading"> 

<h3 class="panel-title">Título do texto do painel</h3> 

</div> 

<div class="panel-body"> 
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<p>Conteúdo textual do painel básico - Loren ...</p> 

</div> 

</div> 

A marcação HTML para criar um painel com rodapé é conforme mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class="panel-body"> 

<p>Conteúdo textual do painel básico - Loren ...</p> 

</div> 

<div class="panel-footer">Rodape do painel</div> 

</div> 

Para criar um painel com título e bordas estilizadas nas cores contextuais, azul 
escuro, verde, azul claro, amarela e vermelha, cor esta que transmite a ideia do 
contexto usamos, no Container geral do painel, as classes panel-prinary, panel-success, 
panel-info, panel-warning e panel-danger respectivamente conforme mostrado na marca- 
ção a seguir. 

• HTML 

<div class="panel panel-prinary''> 

<div class="panel-heading"> 

<h3 class="panel-title">Titulo do texto do painel</h3> 

</div> 

<div class="panel-body"> 

<p>Conteúdo textual do painel básico</p> 

</div> 

</div> 

A marcação HTML para criar um painel com conteúdo textual contendo uma 
tabela é conforme mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class="panel-heading"> 

<h3 class="panel-title">Titulo do painel con tabela</h3> 

</div> 

<div class="panel-body"> 

<p>Conteúdo textual do painel con una tabela - Loren... </p> 
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</table> 

</div> 

A marcação HTML para criar um painel sem conteúdo textual contendo uma 
tabela é conforme mostrada a seguir. 

• HTML 

<div class="panel panei -default"> 

<div class="panel-heading"> 

<h3 class="panel-title">Titulo do painel con tabela</h3> 

</div> 

<table class="table"> 

</table> 

</div> 

A marcação HTML para criar um painel contendo um agrupamento de itens é 
conforme mostrada a seguir. 

• HTML 

<div class="panel panel-default"> 

<div class="panel-heading"> 

<h3 class="panel-title">Título do painel con agrupanento de itens</h3> 

</div> 

<div class="panel-body"> 

<p>Conteúdo textual do painel con un agrupanento de itens</p> 

</div> 

<ul class="Ust-group"> 

<U class="list-group-iten">Abacate</U> 

<U class="Ust-group-iten">Caranbola</U> 

<U class="Ust-group-iten">Figo</U> 

<U class="Ust-group-iten">Uva</U> 

</ul> 

</div> 
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Dica: Tal como mostrado para painel com tabelas, o painel com agrupamento de 
itens poderá conterrquivo que demonstra os diferentes tipos de painel conforme 
as marcações HTML anteriores encontra-se em [.../c4/painel.html]. 


Na figura 4.16, mostramos a renderização destes tipos de painel. 


Painel básico 

Conteúdo textual do painel básico - Lorem ipsum 
dolor sit amet, consectetuer adipiscing elit. Morbi 
eleifend, purus quis laoreet faucibus, ante augue 
malesuada ml. id rhoncus augue lorem eget elit. 


Painel com título 

Titulo do texto do painel 

Conteúdo textual do painel básico - Lorem ipsum 
dolor sit amet, consectetuer adipiscing elit. Morbi 
eleifend, purus quis laoreet faucibus, ante augue 
malesuada mi, id rhoncus augue lorem eget elit. 


Painel com rodapé 

Conteúdo textual do painel básico - Lorem ipsum 
dolor sit amet, consectetuer adipiscing elit. Morbi 
eleifend, purus quis laoreet faucibus, ante augue 
malesuada mi, id rhoncus augue lorem eget elit. 

Rodapé do painel 


Painel com cores contextuais 


Título do texto do painel 


<div elass="panel panel-primary">. . 

, . </div> 


Título do texto do painel 


<div class="panel panel-success">. 

. . </div> 


Título do texto do painel 


<div class=“panel panel-info”>. . 



Título do texto do painel 

<div class="panel panel-warning">. . .</div> 

Título do texto do painel 

<div class=”panel panel-danger">. . .</div> 


Painel com texto e tabela 

Titulo do painel com tabela 

Conteúdo textual do painel com uma tabela - 
Lorem ipsum dolor sit amet. consectetuer 
adipiscing elit. Morbi eleifend. purus quis laoreet 
faucibus, ante augue malesuada mi, id rhoncus 
augue lorem eget elit. 


N°- 

Nome 

Email 

Twitter 

1 

Amaury 

amaury.rf@gmail.com 

@arf 

2 

Carlos 

carl_ 1 985@hotmail.com 

@carlos85 

3 

Maurício 

maujor@maujor.com 

@maujor 

Painel sem texto e tabela 

Titulo do painel com tabela 

N°- 

Nome 

Email 

Twitter 

1 

Amaury 

amaury.rf@gmail.com 

@arf 

2 

Carlos 

carl_l 985@hotmail.com 

@carlos85 

3 

Maurício 

maujor@maujor.com 

@maujor 


Painel com texto agrupamento de itens 

Título do painel com agrupamento de itens 

Conteúdo textual do painel com um agrupamento 
de itens - Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Morbi eleifend, purus quis laoreet 
faucibus. 

Abacate 

Carambola 

Figo 

Uva 

Painel sem texto agrupamento de itens 
Título do painel com agrupamento de itens 
Abacate 
Carambola 
Figo 
Uva 


Figura 4.16 - Painéis. 


4.19 Mídias responsivas 

O Bootstrap prevê classes para tomar responsiva a incorporação de conteúdos 
de terceiros, ou próprios, com uso dos elementos de marcação ifrane, enbed, video 
e object. 

A marcação HTML para tornar responsiva a incorporação com if rane é conforme 
mostrada a seguir. 
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• HTML 

<!-- Mídias con razão de aspecto 16:9 --> 

<div class="enibed-responsi.ve enbed-responsive-16by9"> 

<ifrane class="enbed-responsive-item" src=". . ."></ifrane> 

</div> 

<!-- Mídias con razão de aspecto 4:3 --> 

<div class="embed-responsive enbed-responsive-4by3"> 

<ifrane class="enbed-responsive-item" src=". . ."></ifrane> 

</div> 

Para incorporar um vídeo próprio com uso do elemento video da HTML5 a mar- 
cação HTML é conforme mostrada a seguir. 

• HTML 

<div class="embed-responsive enbed-responsive-4by3"> 

<figure class="enbed-responsive-item"> 

<video poster="cover. jpg" controls> 

<source src="plymouth . ogg" type="video/ogg" /> 

<source src="plymouth ,mp4" type="video/mp4" /> 

<source src^plymouth.webn" type="video/webn" /> 

<p>Lamento! Seu navegador não suporta o elenento vo video localnente <br /> 

<a href="piynouth.np4">fazendo o download</a></p> 

</video> 

</figure> 

</div> 

[.../c4/video-html5-responsivo.html] 

Para incorporar um vídeo do YouTube a marcação HTML é conforme mostrada 
a seguir. 

• HTML 

<div class="enbed-responsive enbed-responsive-16by9"> 

<figure class="enbed-responsive-itef , i''> 

<ifrane src="https://www.youtube.con/enbed/90R6NNXEIsE'' allowfullscreen></ifrai , ie> 
</figure> 

</div> 

[.../c4/video-youtube-responsivo.html] 
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Dica: O código de incorporação (elemento iframe) é fornecido pelo YouTube e o 
Bootstrap permite que se retire do código os atributos width, height e franeborder. 


Para incorporar um mapa do Google a marcação HTML é conforme mostrada 
a seguir. 

• HTML 

<div class="enbed-responsive enbed-responsive-4by3"> 

<figure class="enbed-responsive-iten"> 

<ifrane src=" https://www.google.con/naps/enbed?..." allowfullscreen></ifrane> 
</figure> 

</div> 

[.../c4/mapa-google-responsivo.html] 


Dica: O código de incorporação (elemento ifrane) é fornecido pelo Google Maps 
e o Bootstrap permite que se retire do código os atributos width, height, style e 
franeborder. 


4.20 Wells 

Este é um componente do Bootstrap cuja finalidade é criar um box, com padding 
padrão, para um elemento da marcação estilizado com uma borda de cantos 
arredondados, uma cor de fundo e um efeito de baixo-relevo. 

Basta que se defina a classe well no elemento, para que se dê a estilização. As classes 
opcionais well-sn e well-lg permitam que se diminua ou aumente respectivamente o 
padding padrão obtendo boxes com altura menor e maior em relação a altura padrão. 

A marcação HTML para criar os três tipos de box (três alturas) é conforme mos- 
trada a seguir. 

• HTML 

<p class="well weU-sn">Pellentesque sapien. . ,</p> 

<p class="well">Pellentesque sapien. . . </p> 

<p class="well well-lg ">Pellentesque sapien . . .</p> 

[.../c4/wells.html] 
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Na figura 4.17, mostramos a renderização dos três tipos de box. 


Well altura reduzida 

Pellentesque sapien. Sed purus sapien, eleifend ac. volutpat ac, molestie eget. massa. Nam a nibh. Nulla faciltsi. 

Well padrão 

Pellentesque sapien. Sed purus sapien. eleifend ac, volutpat ac, molestie eget, massa. Nam a nibh. Nulla 
facilisi 


Well altura aumentada 

Pellentesque sapien Sed purus sapien. eleifend ac, volutpat ac, molestie eget, massa Nam a nibh. Nulla 
facilisi. 


Figura 4.17 - Wells. 
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CAPÍTULO 5 

Plugins 


Vimos no capítulo anterior que alguns componentes do Bootstrap são interativos. 
Consideremos a criação de menu dropdown conforme estudado no item [4.2] . 
Naquele item mencionamos, sem mais considerações, que a condição para o 
funcionamento do menu (abertura e fechamento) era a inclusão, na página do 
menu, da biblioteca j Query, do plugin dropdown e da definição do par atributo/ 
valor data-*. Naquele capítulo mencionamos ainda a necessidade de inclusão de 
plugins para fazer funcionar a navegação em abas e as caixas de mensagens. Plu- 
gins estão incluídos no pacote de download do Bootstrap e eles não são apenas 
aqueles citados no capítulo 4. Neste capítulo estudaremos os plugins do Bootstrap 
suas aplicações e uso. 


5.1 Introdução 

Quando fazemos o download do Bootstrap (ver item [1.3]) obtemos uma pasta 
denominada js que contém dois arquivos: o arquivo com todos os plugins do 
Bootstrap em versão comentada e versão comprimida. 

Todos os componentes interativos do Boostrap dependem da inclusão da biblio- 
teca j Query e do arquivo de plugins para funcionar. 

É quase certeza que um projeto não utilize todos os plugins do Bootstrap. Nesse 
caso seria injustificável linear para o arquivo obtido no download do Bootstrap e 
seria mais sensato fazer o download personalizado, incluindo somente os plugins 
a usar no projeto. 

A marcação HTML típica para incluir os arquivos JavaScript que farão funcionar 
a interação na página é conforme mostrado a seguir. 
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• HTML 

<!-- Scripts para fazer funcionar o nenu --> 

<script src="//ajax. googleapis . com/a jax/libs/ jquery/1 . 11.2/jquery.nin. js"></script> 
<script>window. jQuery || docunent.write( ' <script src="../bootstrap/js/jquery.nin.js"> 
<\/script>' )</script> 

<script type="text/javascript" src=" . . /bootstrap/ js/bootstrap . min . js"></script> 

<body> 

<htnl> 

Nessa marcação optamos por incluir os arquivos imediatamente antes da tag 
de fechamento do elemento body e não é do escopo deste livro discutir o local de 
inclusão de Scripts na página. 

Convém esclarecer dois pontos importantes sobre o código mostrado: 

• Na data em que escrevemos este capítulo a versão mais recente da biblioteca 
jQuery era a 1.11.2. No seu projeto altere para a versão atual. 

• Salve uma cópia da biblioteca jQuery na pasta js (que você obteve com o 
download) para criar o link que servirá de fallback para o caso de falha no 
CDN Google. No nosso caso salvamos a biblioteca com o nome de arquivo 
j query. min. js. 

O Bootstrap nos oferece duas opções para aplicar o método principal de um 
plugin em um elemento da marcação. Uma opção é com a definição, diretamente 
na marcação HTML, de um atributo data-* no elemento que recebe o método 
do plugin e a outra é com uso da sintaxe da biblioteca jQuery para aplicação de 
seus métodos. Vejamos cada uma dessas opções tomando como exemplo um link 
de um menu dropdown. 

Em [4.1] estudamos a construção de menus dropdown e vimos que eles dependem 
do plugin dropdown. Para mostrar as duas opções de fazer funcionar o plugin, 
considere a marcação HTML retirada daquele item, para o link Frutas. 

• HTML - Plugin com uso do atributo data-* 


<div class="dropdown"> 

<button class="btn btn-prinary dropdown -toggle" type="button" ld="dropDownl" 

data-toggle="dropdown" aria-expanded="true">Frutas <span class="caret"></span></button> 
<ul class="dropdown-nenu" role="i"ienu" aria-labelledby="dropDownl"> 

<li role="presentation"><a role="nenu-iten" href="#" tabindex="-l">Abacaxi</a></li> 


Conheça os livros do Maujor: http://livrosdomaujor.com.br 


Capítulo 5 ■ Plugins 


161 


<li role="presentation">. . ,</U> 

</ul> 

</div> <!-- /.dropdown --> 

<!-- conteúdos da página --> 

<script src= , 7/ajax.googleapis.con/ajax/Ubs/jquery/1.11.2/jquery.nin. js"></script> 
<script>window. jQuery || document.write( '<script src=" . . /bootstrap/ js/ jquery . min . js"><\/ 
script> ' )</script> 

<script type="text/javascript" src=" . . /bootstrap/ js/bootstrap . min . js"></script> 

<body> 

<htnl> 

Nessa opção definimos o atributo data-toggle="dropdown" no elemento que aciona o 
submenu e o Bootstrap com seus mecanismos internos aplica o método dropdownQ 
do plugin naquele elemento. 

• HTML - Plugin com uso da sintaxe j Query 


<div class="dropdown"> 

<button class="btn btn-prinary dropdown -toggle" type="button" id="dropDownl" 

data ■ toggle = "d ropdown " aria-expanded="true">Frutas <span class="caret"></span></button> 
<ul class="dropdown-nenu" role="nenu" aria-labelledby="dropDownl"> 

<li role="presentation"><a role^menu-item" href="#" tabindex="-l">Abacaxi</a></li> 
<U role="presentation">. . ,</H> 


</ul></div> <!-- /.dropdown --> 

<!-- conteúdos da página --> 

<script src="//ajax. googleapis . con/a jax/libs/ jquery/1 . 11.2/jquery.min. js"></script> 
<script>window. jQuery || docunent.write( '<script src=" . . /bootstrap/ js/jquery .min . js"> 
<\/script>' )</script> 

<script type="text/javascript" src=" . . /bootstrap/ js/bootstrap . min . js"></script> 

<script type="text/ javascript"> 

$( 1 . d ropdown -toggle ' ) . d ropdown ( ) ; 

</script> 

<body> 

<htnl> 

Nessa opção não há definição de atributo data-toggle="dropdown" no elemento que 
aciona o menu. Usa-se a sintaxe jQuery padrão para chamar o método dropdownQ 
naquele elemento. 


Conheça os livros do Maujor: http://livrosdomaujor.com.br 


162 


Boostrap 3.3.5 


O uso do atributo data-* deve ser considerado em primeiro lugar, contudo a ou- 
tra opção oferece ao desenvolvedor maior flexibilidade na aplicação do método, 
podendo tirar proveito, por exemplo, do encadeamento que a sintaxe j Query 
possibilita como mostrado a seguir. 

$( 1 .dropdown-toggle' ).dropdown().css( 'color' , 1 #f 00 1 ) ; 

ou ainda, definir opções: 

$('#janelaModal').nodal( { keyboard: false } ); // desabilita abertura por teclado 

É possível desabilitar globalmente a opção data-* para fazer funcionar plugins 
conforme mostrado a seguir: 

$( ' body ' ) . of f ( ' data - api ' ) ; // desabilita para todos os plugins 

Podemos também desabilitar a opção data-* para um determinado plugin con- 
forme mostrado a seguir: 

$( ' body ' ) . of f ( ' dropdown . data - api ' ) ; // desabilita o plugin dropdown 
Construtores jQuery estão disponíveis com a sintaxe clássica: 

$ . f n . none -do- plugin . Constructor 


5.2 Plugins 

Nos itens a seguir estudaremos cada um dos plugins disponíveis no Bootstrap. 

O script dos plugins do Bootstrap encontram-se no arquivo existente na pasta js 
denominado bootstrap.min.js. 

No caso de download compilado esse arquivo contém todos os plugins do Boots- 
trap. Opcionalmente você poderá incluir somente os plugins que irá utilizará no 
seu projeto fazendo o download personalizado. 

No caso de download de todo o Bootstrap (source) você poderá obter os arquivos 
dos plugins individualmente no arquivo bootstrap.js que encontra-se na pasta js. 


5.2.1 Transições 

O plugin para transições destina-se a ser usado em conjunto com outros plugins 
cujas funcionalidades admitem uso de transição tal como obtenção de efeitos slide 
e fade em janelas modais, abas, caixas de alerta e painéis. As transições disponíveis 
nesse plugin são slide e fade. 
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Janela modal é uma poderosa interface de diálogo com o usuário que se destina 
a variados usos e proporciona um visual agradável ao visitante da página. 

O Bootstrap possibilita a criação de janela modal com uso de marcação típica e 
o mecanismo de abertura e fechamento da janela pode ser definido de duas for- 
mas: diretamente com uso do par atributo/valor data-toggle="nodal" ou codificando 
com uso de métodos JavaScript previstos no Bootstrap. É possível ainda obter o 
efeito de janela modal criando Scripts personalizados com uso dos métodos e 
propriedades próprios da biblioteca j Query 

5.2.2. 1 Com uso de data-toggle 

Para acionar o mecanismo de abertura e fechamento da janela modal basta 
declarar o atributo data-toggle para o elemento que marca o botão ou o link de 
abertura da janela. 

Os mecanismos internos do Bootstrap identificam aquele atributo na marcação 
e acionam os códigos JavaScript necessários para abrir e fechar a janela. O desen- 
volvedor não precisa criar código JavaScript para acionar a janela, eles são criados 
automaticamente pelo Bootstrap. 

A marcação HTML mostrada a seguir é a padrão do Bootstrap para criação de 
uma janela modal com uso do atributo data-toggle. 

• HTML 

1. <button type="button" class="btn btn-prinary btn-lg" data-toggle="modal" 

data-target="#nodalLogin"> 

2. Abrir janela nodal 

3. </button 

4. <div class="modal fade" id="modalLogin" tabindex="-l" role="dialog" 

aria-labelledby="nodalLoginLabel"> 

5. <div class="nodal-dialog" role="docunent"> 

6. <div class=''modal-content"> 

7. <div class=''nodal-header"» 

8. <button type="button" class="close" data-disniss="nodal" 

aria - label="Close"><span aria - hidden="true">&times;</spanx/button> 

9. <h4 class="nodal-title">Área adninistrativa</h4> 

10. </div> 

11. <div class=''nodal-body"> 

12 <!-- conteúdo da janela nodal --> 
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13. </div> 

14. <div class="modal-footer"> 

15. <button type="button" class="btn btn-default" 

data-dismiss="modal">Fechar</button> 

16. </div> 

17. </div> <!-- /.modal-content --> 

18. </div> <!-- /.piodal-dilog --> 


19. </div> <! -- /.modal --> 


[.../c5/modal-data-toggle.html] 

Código comentado: 


Linha(s) Descrição 


Linhas 1 a 3 


Linha 4 a 19 


Linhas 5 e 6 
Linhas 7 a 10 


Linha 11 a 13 


Botão para abertura da janela modal. O atributo data-target deve apon- 
tar para o valor do atributo id do Container geral da janela, no nosso 
caso o div#modalLogin na linha 4. Opcionalmente em lugar de um botão 
para abrir a janela poderíamos usar um link e neste caso o atributo 
href do link apontaria para o id do Container geral da janela, no nosso 
caso href="#modalLogin". Aclasse btn definida para o link de abertura da 
janela faz com que os mecanismos internos do Bootstrap transformem 
o link em um botão. Esse botão pode ser estilizado com uso de classes 
adicionais, tal como btn-primary e btn-lg. A classe data-toggle, definida 
para aquele link, informa ao Boostrap que a j anela modal terá seu script 
de abertura e fechamento inserido automaticamente sem necessidade 
de codificação JavaScript pelo autor. 

Marcação do div Container da janela modal. A classe modal é de uso 
obrigatório e informa ao Boostrap que trata-se do Container de uma 
janela modal. A classe fade faz com que o efeito de abertura seja por 
deslizamento da janela no sentido vertical, na direção de cima para 
baixo e com efeito de esmaecimento. Opcionalmente podemos omitir 
o valor fade que produz o efeito de mostrar e esconder a janela sem 
dislazamento e esmaecimento, ou seja, abertura e fechamento fixa na 
sua posição. Sugiro fazer uma cópia do exemplo retirar a classe fade 
verificando na prática os dois efeitos de abertura/fechamento. O atributo 
id é de livre escolha do autor. 

Containeres auxiliares para estilização e Scripts. 

Marcação do div. modal -header Container do cabeçalho da janela. Esse div 
contém o botão superior direito de fechamento da janela (um xis) e o 
título da janela. O atributo data-dismiss com o valor modal informa ao 
Bootstrap que se trata de um botão para fechar a janela. A classe close 
estiliza e posiciona o botão x(xis) de fechamento da janela. 

Marcação do div. modal -body Container do corpo (conteúdo principal) 
da janela. 
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Linha 14 a 16 Marcação do div.nodal-footer Container do rodapé da janela. Esse div 
contém o botão inferior de fechamento da j anela. O atributo data - dismtss 
com o valor modal informa ao Bootstrap que se trata de um botão para 
fechar a janela. 

A renderização da janela modal constante do arquivo anterior é conforme mos- 
trada na figura 5.1. 


Área administrativa 


Nome de usuário: 


Ci Lembrar meus dados 

Perdeu a senha? 


Fechar 


Figura 5.1 - Janela modal. 


52.2.2 Com uso de JavaScript nativo 

A segunda opção para acionar o mecanismo de abertura e fechamento da janela 
modal é com uso dos métodos JavaScript nativos do Bootstrap. 

Na verdade, nas duas opções o mecanismo usa JavaScript a diferença é que para a 
primeira opção são os mecanismos internos do Boostrap que identificam os atri- 
butos da marcação HTML e acionam os códigos JavaScript necessários para abrir 
e fechar a janela e na opção com JavaScript nativo o desenvolvedor precisa definir 
manualmente os métodos JavaScript próprios do Bootstrap para acionar a janela. 

O método nativo para inicializar uma janela modal tem a sintaxe conforme 
mostrada a seguir. 

$( ' #nodalLogin ' ) . modal(options) 

onde #nodalLogin é o valor do id do Container da janela modal. O nome desse valor, 
obviamente, é de livre escolha do autor e no nosso exemplo usamos modalLogin. 
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As opções para esse método são: 


Nome 

Tipo 

Default 

Descrição 

backdrop 

boleano 

true 

Define a existência de um fundo na cor preta e transparente para a janela 
modal. Pode-se ainda definir o valor static que define o fundo, mas 
desabilita o fechamento da janela quando clicamos nesse fundo. 

keyboard 

boleano 

true 

Define o fechamento da janela modal quando a tecla Esc é pressionada. 

show 

boleano 

true 

Mostra a janela modal na inicialização da página. 

remote 

path 

false 

0 valor para essa opção é o uri de um arquivo remoto cujo conteúdo será 
carregado com uso do método AJAX load da biblioteca jQuery e injetado 
no Container .modal-content. Alternativamente podemos usar o atributo 
href na marcação HTML para definir o uri remoto a carregar, conforme 
mostrado no exemplo a seguir. 

<a data-toggle="modal" href="remoto.html" 
data-target="#modalLogin"> Abrir janela modak/a> 

Esta funcionalidade está em desuso e será retirada na versão BS4. 


Opcionalmente, podemos definir as opções do método JavaScript nativo decla- 
rando-as com uso dos atributos data-*. Por exemplo: data-keyboard="false". 

São previstos ainda os métodos conforme as sintaxes mostradas a seguir. 

$( ' #nodalLogin 1 ).modal("toggle") // Abre e fecha a janela nodal 
$( ' #nodalLogin ' ) . modal( "show" ) // Abre a janela nodal 

$( ' #nodalLogin ' ) . modal( "hide" ) // Fecha a janela nodal 

Os eventos nativos são descritos a seguir. 


Evento 

Descrição 

show. bs. nodal 

Esse evento ocorre imediatamente após a chamada de uma instância do método show. 

shown. bs. nodal 

Esse evento ocorre assim que a janela modal torna-se visível para o usuário (após as 
transições CSS terem ocorrido). 

hide. bs. nodal 

Esse evento ocorre imediatamente após a chamada de uma instância do método hide. 

hidden. bs. nodal 

Esse evento ocorre assim que a janela modal torna-se invisível para o usuário (após as 
transições CSS terem ocorrido). 

loaded. bs. nodal 

Esse evento ocorre assim que um conteúdo remoto requisitado é carregado na janela modal. 


No exemplo a seguir mostramos o uso de métodos JavaScript para abertura de 
janela modal e a captura de eventos para abrir uma caixa de alerta JavaScript 
identificando o evento disparado. A marcação HTML é a mesma marcação usada 
no anterior com a única diferença que dela retiramos o par atributo valor data- 
toggle="nodal" conforme mostrado a seguir. 
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1. <button type="button" class="btn btn-primary btn-lg" data - toggle = "nodal" data- 
target="#nodalLogin"> 

2. Abrir janela nodal 

3. </button 

4. <div class="nodal fade" id="modalLogin" tabindex=" -1" role="dialog" aria- 
labelledby="modalLoginLabel"> 

5. <div class="nodal-dialog" role="docunent"> 

... <!-- idêntico ao exenplo anterior --> 

18. </div> <!-- /.nodal-dilog --> 

19. </div> <! -- /.nodal --> 

Feitas essa única alteração na marcação HTML criamos o script conforme mos- 
trado a seguir. 

• JavaScript 

<script type="text/javascript"> 

$( 'button[data-target="#modalLogin"] ' ) .on( ' click ' , functionQ { 

$( 1 #nodalLogin 1 ) . nodal( ' toggle ' ) ; 

}); 

$( ' #nodalLogin 1 ).on( 'show. bs. nodal' , function () { 
alert( ' Modal vai ser aberta\nEvento: show. bs. nodal' ); 

}); 

$( ' #nodalLogin 1 ).on( 'shown. bs. nodal' , function () { 
alert( ' Modal foi aberta\nEvento: shown. bs. nodal' ); 

}); 

$( ' #nodalLogin ' ).on( 'hide.bs. nodal ' , function () { 
alert( ' Modal vai ser fechada\nEvento:hide. bs. nodal'); 

}); 

$( ' #nodalLogin ' ).on( 'hidden.bs. nodal ' , function () { 
alert( ' Modal foi fechada\nEvento:hidden. bs. nodal'); 

}); 

</script> 

</body> 

</html> 

[.../c5/modal-javascript.html] 

Visualize esse exemplo online para constatar o disparo dos eventos show, shown, 
hide e, hidden. 
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5.2.3 Dropdown 

Dropdown é uma funcionalidade que permite ao autor criar um efeito de abertura 
e fechamento de submenus. Podemos inserir dropdown nos componentes barras 
de navegação, abas e pills estudados no capítulo 4. 

O Boostrap possibilita a criação de menu dropdown com uso de marcação típica 
e o mecanismo de abertura do menu pode ser definido de duas formas: direta- 
mente com uso do par atributo/valor data-toggle="dropdown'' ou codificando com 
uso do método JavaScript dropdownQ previsto no Bootstrap. 

5.2.3. 1 Com uso de data-toggle 

A marcação HTML mostrada a seguir é a padrão do Bootstrap para criação de 
um menu dropdown criado com uso do par atributo/valor data-toggle="dropdown" e 
inserido em uma barra de navegação (ver [4.7]). 

Notar que o valor do atributo data-target do botão contido em div.navbar-header 
deve ser igual ao id do Container geral do menu dropdown. 

• HTML 

<nav class="navbar navbar-default"> 

<div class=''navbar-header"> 

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 

data-target="#barraDataToggle"> 

<a class="navbar-brand" href="#">Autonóveis</a> 

</div> 

<div class= l, collapse navbar-collapse" Ld="barraDataToggle"> 

<ul class="nav navbar-nav"> 

<U class="active"><a href="#">Hone <span dass="sr-only">(current)</span></a></U> 
<U><a href="#">Ford</a></U> 

<U class="dropdown"> 

<a href="#" class="dropdown-toggle" data-toggle="dropdown" 
role=''button" aria-expanded="false">Renault<span class="caret"></span></a> 
<ul class="dropdown -menu" role="i"ienu"> 

<U><a href="#">Clio</ax/U> 

</ul> 

</U> 

<U class="dropdown"> 
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<a href="#" class="dropdown-toggle" data-toggle="dropdown" 
role="button" aria-expanded="false">Volkswagen<span class="caret"></span></a> 
<ul class=''dropdown-nenu" role="menu"> 

<U><a href="#">Novo Gol</a></li> 

</ul> 

</li> 

<li><a href="#">Contato</ax/li> 

</ul><!-- /.navbar --> 

</div><! - - /.navbar-collapse --> 

</nav> 


[.../c5/dropdown-data-toggle.html] 

A renderização da barra de navegação com link com efeito dropdown conforme 
mostada na marcação HTML anterior é conforme a figura 5.2. 


Dropdown em barra de navegação 

Automóveis Home Ford Renault» 

Volkswagen » Contato 


Novo Gol 

Gol G4 

Fox 

Crossfox 

Outros 



Figura 5.2 - Dropdown em barra de navegação. 


5.2.3.2 Com uso de JavaScript nativo 

A segunda opção para obter o efeito dropdown é com uso dos métodos JavaScript 
nativos do Bootstrap. 

Na verdade, nas duas opções o mecanismo usa JavaScript a diferença é que para 
a primeira opção são os mecanismos internos do Bootstrap que identificam os 
atributos da marcação HTML e acionam os códigos JavaScript necessários para 
fazer funcionar o dropdown e na opção com JavaScript nativo o desenvolvedor 
precisa definir manualmente os métodos JavaScript próprios do Bootstrap para 
acionar o dropdown. 
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O método nativo para inicializar um dropdown tem a sintaxe conforme mostrada 
a seguir. 

$( ' #dropDownN 1 ).dropdown() 

onde #doprDownN é o valor do id do elemento ul que contém os liks do dropdown. O 
nome desse valor, obviamente, é de livre escolha do autor e no nosso exemplo usa- 
mos dropDownl para o submenu do link “Renault” e dropDown2 para o submenu do link 
“Volkswagen” pois mostramos estes dois links com dropdown na bara de navegação. 

Este método não admite opções. 


Os eventos nativos são descritos a seguir. 


Evento 

Descrição 

show. bs. dropdown 

Esse evento ocorre imediatamente após a chamada de uma instância do método show. 

shown. bs. dropdown 

Esse evento ocorre assim que a janela modal torna-se visível para o usuário (após as 
transições CSS terem ocorrido). 

hide. bs. dropdown 

Esse evento ocorre imediatamente após a chamada de uma instância do método hide. 

hidden. bs. dropdown 

Esse evento ocorre assim que a janela modal torna-se invisível para o usuário (após as 
transições CSS terem ocorrido). 


Estes eventos são atrelados aos elementos que marcam os links de abertura do 
dropdown e no nosso exemplo adotamos o id="abreDropDownl" para o link “Renault” 
e id="abreDropDown2" para o link “Volkswagen”. 

Se os eventos show. bs. dropdown e shown. bs. dropdown forem disparados por ação de click, 
está disponível a propriedade relatedTarget que retorna o elemento que foi clicado. 

No exemplo a seguir mostramos o uso do método JavaScript para abertura de 
dropdown, para a captura de eventos e para inspecionar a propriedade relatedTarget. 
A marcação HTMLé a mesma marcação usada no exemplo anterior, com acréscimo 
dos atributos id conforme mostrado em destaque na marcação HTML a seguir. 

Alerta: Ao contrário do componente modal estudado anteriormente para o 
componente dropdown é necessário que o par atributo valor data-toggle="dropdown" 
não seja retirado da marcação HTML. 


• HTML 

/* igual à marcação do exemplo anterior */ 

<li class="dropdown"> 

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
aria-expanded="false"> 
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Renault<span class="caret" id="abreDropDownl"></span></a> 

<ul class="dropdown-nenu" role="nenu" id="dropDownl"> 

<li><a href="#">Clio</ax/li> 

</ul> 

</U> 

<li class="dropdown"> 

<a href="#" class="dropdown-toggle" data-toggle="dropdown" roie="button" 
aria-expanded="false"> 

Volkswagen<span class="caret" id="abreDropDown2"></span></a> 

<ul class=''dropdown-nenu" role="nienu" id="dropDown2"> 

<U><a href="#">Novo Gol</a></li> 

</ul> 

</li> 

<U><a href="#">Contato</ax/li> 

</ul><! - - /.navbar --> 

</div><! - - /.navbar-collapse --> 

</nav> 

O script é conforme mostrado a seguir. 

• JavaScript 

<script type="text/javascript"> 

$( '#abreDropDownl, #abreDropDown2"] 1 ).on( ' click 1 , function() { 

$( 1 #dropDownl , #dropDown2 ' ) ,dropdown( ' toggle ' ) ; 

}); 

$( 1 . dropdown 1 ). on( 'show. bs. dropdown' , function (e) { 
var textoLink = $(e.relatedTarget).text(); 

alert( 'Dropdown vai ser aberto\nEvento: show.bs.dropdown\nLink dicado: ' + 
textoLink); 

}); 

$('. dropdown'). on('shown. bs. dropdown', function () { 
aiert( 'Dropdown foi aberto\nEvento: shown. bs. dropdown' ); 

}); 

$( 1 . dropdown 1 ). on( ' hide . bs. dropdown 1 , function () { 

aiert( 'Dropdown vai ser fechado\nEvento: hide. bs. dropdown' ); 

}); 

$( 1 . dropdown'). on( ' hidden . bs. dropdown' , function () { 

aiert( 'Dropdown foi fechado\nEvento: hidden. bs. dropdown ' ); 

}); 
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</script> 

</body> 

</html> 


[.../c5/dropdown-javascript.html] 

Visualize esse exemplo online para constatar o disparo dos eventos show, shown, hide 
e, hidden e o uso da propriedade relatedTarget. 


5.2.4 Scrollspy 

Scrollspy é uma funcionalidade que permite ao autor monitorar automaticamente 
a posição da barra de rolagem da página quando se tem navegação interna (in- 
-page), ou seja, navegação na própria página. 

Navegar na própria página significa que o clique em link de um mecanismo de 
navegação em lugar de conduzir o usuário para uma nova página (página dentro 
do mesmo site ou externa) é conduzido a um determinado ponto da própria 
página (aquela que contém o mecanismo de navegação). 

Em geral navegação interna é indicada para páginas extensas com seções que po- 
dem ser consultadas (lidas) individualmente sem necessidade de leitura corrida 
para seu entendimento. Por exemplo: página FAQ desenvolvida sem o recurso 
do menu sanfona, na qual as perguntas estão inseridas como itens de um menu 
e as respostas como alvo do clique em uma pergunta. 

Outra forma de navegação interna, para a qual podemos aplicar a funcionalidade 
scrollspy é aquela na qual os conteúdos alvo dos links são inseridos dentro de um 
Container com altura fixa e existência de barra de rolagem para acessar conteúdos 
em overflow com aquela altura. 

O mecanismo do Bootstrap para fazer funcionar o scrollspy consiste em desta- 
car o link quando o usuário chega ao seu alvo por ação de rolagem na barra de 
rolagem ou quando o usuário aciona a barra de rolagem atingindo os alvos dos 
links. Só faz sentido projetar scrollspy quando o menu de navegação permanece 
fixo e à vista do usuário durante a rolagem. 

A marcação HTML típica para navegação interna é conforme mostrada a seguir. 
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<a href="#css">CSS</a> 

<a href="#htnl">HTML</a> 

<a href="#js">javascript</a> 

<div id="css">CSS</div> 

<!-- texto CSS --> 

<div id="css">HTML</div> 

<!-- texto HTML --> 

<div id="css">javascript</div> 
<!-- texto javascript --> 


O atributo href de cada link é igual ao valor do atributo id precedido do sinal # 
(tralha) definido para o elemento da página para o qual se pretende navegar. Na 
marcação anterior um elemento div. 

Existem duas maneiras de se projetar scrollspy: diretamente com uso do par 
atributo/valor data-spy="scroll" ou codificando com uso de métodos JavaScript 
previstos no Bootstrap. Veremos a seguir essas duas maneiras. 

5.2.4.1 Scrollspy para a página com uso de data-spy 

Para acionar o mecanismo scrollspy basta declarar os atributos data-spy e data-target 
para o elemento cuja barra de rolagem se pretende monitorar. No nosso exemplo 
vamos monitorar a barra de rolagem vertical da página (janela do navegador). 

Os mecanismos internos do Bootstrap identificam aqueles atributos na marcação 
e acionam os códigos JavaScript necessários para fazer funcionar o scrollspy O 
desenvolvedor não precisa criar código JavaScript, eles são criados automatica- 
mente pelo Bootstrap. 

No exemplo a seguir mostramos os códigos para a criação de uma barra de navega- 
ção fixa (ver [4.7.2]) no topo da página destinada à navegação interna e utilizamos 
a funcionalidade scrollspy para monitorar a barra de rolagem vertical da página. 

• HTML 

1. <body data-spy="scroU" data-target="#barraNavegacao"> 

2. <div class="container-fluid" id="hone"> 

3. ... 

4. <nav class="navbar navbar-default navbar-fixed-top" id="barraNavegacao"> 
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5. <div class="container-fluid"> 

6. div class="navbar-header"> 

7. <button type="button" class="navbar-toggle collapsed" data-toggle="coUapse" 

data-target="#barraFixaTop"> 


9. </button> 

10. <a class="navbar-brand" href="#">Site</a> 

11. </div> 

12. <div class="collapse navbar-collapse" id="barraFixaTop"> 

13. <ul class="nav navbar-nav"> 

14. <li class="active"><a href="#hone">Home<span class="sr-only">(current)</span> 

</ax/li> 

15. <U><a href="#portfoUo">PortfóUo</ax/U> 

16. <U><a href="#piaterias">Matérias</ax/U> 

17. <H><a href="#contato">Contato</a></U> 

18. </ul> 

19 </div>< ! - - /.navbar-collapse --> 

20 . </div>< ! - - /. Container -fluid --> 

21. </nav> 

22. <div id="portfolio"> ... </di v> 

23 . <div id="materias">. . . </div> 

24. <dlv id="contato"> ... </div> 

25. ... 


[.../c5/scrollspy-body-data-spy.html] 

Código comentado: 


Linha(s) Descrição 


Linha 1 


Linhas 4 a 21 


Linhas 14 a 17 


Para fazer funcionar o plugin scrollspy basta acrescentar os pares atri- 
buto/valor data-spy="scroll" e data-target="valor" no elemento body da 
página a monitorar a rolagem. O valor do atributo data-target é o do 
seletor que define o Container do mecanismo de navegação, no nosso 
exemplo nav#barraNavegacao que é o ld do elemento nav Container da barra 
de navegação. 

Marcação que cria uma barra de navegação fixa no topo da página. Ver 
[4.7.2], Notar na linha 4 o Container da barra de navegação com o id 
de valor igual barraNavegacao que foi referenciado no atributo data-target 
do elemento body como descrito no item anterior. 

Marcação dos links da barra de navegação com o atributo h ref apontando 
para o id do Container de conteúdos de cada link como mostrado nas 
linhas 2, 22, 23 e 24 respectivamente. 


Conheça os livros do Maujor: http://livrosdomaujor.com.br 


Capítulo 5 ■ Plugins 175 

Em [4.7.2], quando estudamos barras de navegação fixas dissemos o seguinte: 


Ao optar pelo uso de uma barra de navegação fixa é preciso definir um 
padding de no mínimo 50px para o elemento body com a finalidade de 
abrir espaço para inserção da barra. Declare padding-top e/ou padding- 
bottom conforme use barra fixa no topo e/ou rodapé. 

Nesse exemplo, ao clicarmos um link, a página rola para o texto do elemento 
alvo do link (um elemento div) que é colocado no topo da janela. Como temos 
uma barra de navegação fixa no topo ela irá cobrir o início daquele texto até uma 
altura de 50px, que é a altura da barra de navegação. Então, precisamos declarar 
regras de estilo para fazer o texto alvo do link descer no mínimo 50px e sair de 
trás da barra de navegação. Para isso acrescente a seguinte folha de estilo à página: 

• css 

body { padding-top:50px;background: #ccc; } 

#portfolio, #naterias, #contato { 
padding-top: 50px; 

/* 0 padding-top aqui é necessário para posicionar o Container do conteúdo abaixo da 
barra fixa */ 

} 

Os valores definidos na folha de estilo mostrada são válidos para a aplicação pa- 
drão de estilos do Bootstrap em layouts fixos. Se necessário altere aqueles valores 
para contemplar as particularidades do seu projeto. 

Ao consultar esse arquivo clique os links da barra de navegação e depois movi- 
mente a barra de rolagem da página para cima e para baixo observando o plugin 
scrollspy em ação. 

5 .2.4.2 Scrollspy em Container com uso de data-spy 

No exemplo a seguir mostraremos a criação de uma barra de navegação básica 
destinada à comandar a navegação em um Container da página e utilizamos a 
funcionalidade scrollspy para a barra de rolagem vertical do Container. A barra de 
rolagem no Container será criada com uso das propriedades CSS height e overflow 
para o Container. 

Usaremos a mesma marcação HTML do exemplo anterior com as modificações 
conforme mostradas em destaque a seguir. 
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• HTML 

1. <body data-spy="scroll" data-target="#barraNavegacao"> 

2. <div class="container-fluid" id="hone"> 

3. ... 

4. <nav class="navbar navbar-default navbar-fixed-top" id="barraNavegacao"> 

5. <div class="container-fluid"> 

6. div class="navbar-header"> 

7. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 

data-target="#barraFixaTop''> 

8 . 

9. </button> 

10. <a class="navbar-brand" href="#">Site</a> 

11. </div> 

12. <div class="collapse navbar-collapse" id="barraFixaTop"> 

13. <ul class="nav navbar-nav"> 

14. <U class="active"xa href="#hone">Hone<span class="sr-only">(current)</span></a></li> 

15. <li class="active"><a href="#portfoUo''>PortfóUo<span class="sr- 

only">(current)</spanx/ax/li> 

16. <U><a href="#naterias">Matérias</ax/U> 

17. <H><a href="#contato">Contato</a></U> 

18. </ul> 

19 </div>< ! - - /.navbar-collapse --> 

20. </div><! -- /. Container -fluid --> 

21. </nav> 

22. <div id="containerConteudo" data-spy="scroll" data-target="#barraNavegacao"> 


23. 

<div id="portfoUo"> 

. . . < / div: 

24. 

<div id="materias">. . 

. </div> 

25. 

<div id="contato"> .. 

. </div> 


26 </div> 

27. ... 

[.../c5/scrollspy-container.html] 

Nesse exemplo forçamento o aparecimento de uma barra de rolagem no Container. 
Para isso acrescente a seguinte folha de estilo à página: 

• css 

<style type="text/css"> 

#containerConteudo { 
height: 400px; 
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overflow-y: scroll; 

} 

</style> 

Ao consultar esse arquiro clique os links da barra de navegação e depois mo- 
vimente a barra de rolagem do Container para cima e para baixo observando o 
plugin scrollspy em ação. 

5 .2.4.3 Scrollspy com JavaScript nativo 

Na verdade, nas opções com uso de data-spy e com uso de JavaScript o mecanismo 
do plugin usa JavaScript. A diferença é que para a primeira opção são os meca- 
nismos internos do Bootstrap que identificam os atributos da marcação HTML 
e acionam os códigos JavaScript necessários para fazer funcionar scrollspy e na 
opção com JavaScript nativo o desenvolvedor precisa definir manualmente os 
métodos JavaScript próprios do Bootstrap para acionar a janela. 

O método nativo para inicializar scrollspy tem a sintaxe conforme mostrada a 
seguir. 

$( 1 xpto ' ) .scrollspy(options) 

onde xpto identifica o Container do elemento a monitorar a barra de rolagem. O 
escolha desse identificador, obviamente, é de livre escolha do autor. 


Existe uma opção para esse método conforme descrita a seguir. 


Nome 

Tipo 

Default 

Descrição 

offset 

número 

10 

Retorna o valor em pixel da distância até o topo quando efetua-se o 
cálculo da posição da barra de rolagem. Importante notar que essa 
opção não define a distância, ela apenas retorna a distância. 


É previstos ainda o método conforme a sintaxe mostrada a seguir. 


$( 1 xpto ' ) . spy( ' ref resh 1 ) // Para inserções dinâmicas no DOM 

Esse método é útil para atualizar o plugin quando há inserção dinâmica no 
DOM já carregado. A sintaxe geral para aplicar o método em todos os scrollspy 
constantes da página é mostrada a seguir. 

$( 1 [data - spy= "scroll"]'). each(function () { 
var $spy = $(this).scrollspy(Tefresh') 

}); 

O evento nativo é descrito a seguir. 
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Evento 

Descrição 

activate 

Esse evento ocorre quando um novo link é ativado pelo scrollspy. 


A seguir mostraremos o mesmo exemplo constante do item [5.2.4.1] anterior para 
demonstrar o uso de JavaScript nativo para essa funcionalidade. 

• HTML 

<body> //retiramos os atributos data-* 

<!-- igual à narcação do item [5. 2. 4.1] --> 

[.../c5/scrollspy-javascript.html] 

Notar que foram retirados os atributos data-* do elemento body. 

O código JavaScript é mostrado a seguir. 

• JavaScript 

<script type="text/javascript"> 

$('body').scrollspy( {target: '#barraNavegacao'} ).on(' activate. bs. scrollspy', 
function () { 

alert(' Foi ativado scrollspy 1 ); 

}); 

</script> 

</body> 

</html> 

Ao consultar esse arquivo clique os links da barra de navegação e depois movi- 
mente a barra de rolagem da página para cima e para baixo observando o plugin 
scrollspy em ação. Observe o disparo do evento activate. bs. scrollspy toda vez que 
se clica um link na caixa de alerta JavaScript. 


5.2.5 Abas 

Abas é uma funcionalidade que permite ao autor criar um mecanismo de navegação 
baseado em abas, ou seja, quando o usuário clica em um link contido em uma aba 
(ou em pill) o conteúdo alvo do link é apresentado em uma área fixa na página. 

Existem duas maneiras de se projetar navegação em abas: diretamente com uso do 
par atributo/valor data-toggle="tab" ou codificando com uso de métodos JavaScript 
previstos no Bootstrap. Veremos a seguir essas duas maneiras. 
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A criação de abas e pills foi estudada em [4.6] onde mostramos como criar os 
diferentes tipos de aba e pill, mas sem acrescentar a funcionalidade da navegação. 
Veremos a seguir abas em funcionamento. 

5.2.5.1 Abas com uso de data-toggle 

Para acionar o mecanismo de navegação em abas basta declarar os atributos data- 
toggle="tab" para cada um dos elementos a que marcam os links das abas. 

Os mecanismos internos do Bootstrap identificam aquele atributo na marcação 
e acionam os códigos JavaScript necessários para fazer funcionar a navegação 
em aba. O desenvolvedor não precisa criar código JavaScript, eles são criados 
automaticamente pelo Bootstrap. 

No exemplo a seguir mostraremos a criação de uma aba de navegação padrão. 

• HTML 

1. <body> 

2. <ul class="nav nav-tabs' 1 role="tablist"> 

3. <li role="presentation" dass="active"xa href="#hone" aria-controls="hone" 

role="tab" data-toggle="tab">Home</a></U> 

4. <ti role="presentation"><a href="#portfolio" aria-controls="portfolio" role="tab" 

data-toggle="tab">PortfóUo</ax/H> 

5. <li role="presentation"xa href="#artigos" aria-controls="artigos" role="tab" 

data-toggle="tab">Artigos</ax/H> 

6. <li role="presentation"xa href="#contato" aria-controls="contato" role="tab" 

data-toggle="tab">Contato</a></U> 

7. </ul> 

8. <div class="tab-content"> 

9. <div role="tabpanel" dass="tab-pane fade in active" id="hone"> 

11. <h4>Hone</h4> 

12. <p>Loren ipsun. . . </p> 

13. </div> 

14. <div role="tabpanel" dass="tab-pane fade" id="portfoUo"> 

15. <h4>PortfóUo</h4> 

16. <p>Curabitur hendrerit. . ,</p> 

17. </di v> 

19. <div role="tabpanel" dass="tab-pane fade" id="artigos"> 

20. <h4>Artigos</h4> 

21. <p>Pellentesque sapien. . . </p> 

22. </div> 
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19. <div role="tabpanel" class="tab-pane fade" id="contato"> 

20. <h4>Contato</h4> 

21. <p>Cun sociis natoque. . .</p> 

22. </di v> 

23. </div> <!-- /.tab-content --> 

[.../c5/aba-data-toggle.html] 

Código comentado: 

Linha(s) Descrição 

Linhas 2 a 7 Links da aba. O atributo href do link tem como alvo o valor do id do 
Container dos conteúdos de cada aba. 

Linhas 8 e 23 Container de todo o conteúdo a ser exibido nas abas. Esse Container 
deverá receber a classe tab-content. 

Linhas 9 a 22 Cada um dos conteúdos de uma aba deverá estar dentro de um Container 

div ao qual atribui-se a classe tab-pane e o id com valor igual ao valor 
do atributo href (sem o sinal tralha) do link que mostra o conteúdo. 
Notar as classes fade e in no Container, elas se destinam a adicionar o 
efeito fade na abertura/fechamento das abas e a classe in deve ser usada 
somente na aba inicialmente ativa. 


Dica: Os atributos role e aria-* constantes da marcação são usados para contemplar 
critérios de acessibilidade. 


Neste exemplo criamos uma folha de estilos incorporada ao arquivo com a finali- 
dade de personalizar as abas. A folha de estilos é mostrada e comentada a seguir. 

• css 

<style rel="stylesheet"> 
body { background: #ccc; } 
h2 {font-size:20px;} 

.tab-content { 

height: 250px; /* lircitanos a altura da ára de nostra dos conteúdos */ 

overflow-y:auto; /* barra de rolagen para conteúdos que ocupen altura 
naior que o linite 250px */ 
border: 3px solid #fff; 
border -botton-left-radius:5px; 
border - bottom- right - radius : 5px; 

} 

.tab-content h2 { margin - top : 3px; } /* sobrescrevenos a nargen padrão de h2 */ 

#home,#portfolio,#artigos,#contato { 
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color: #fff; 
paddlng: 0 15px; 

} 

#hone { background: #333; } 

#portfolio { background: #930;} 

#artigos { background: #030;} 

#contato { background: #036;} 

.nav-tabs > li > a { /* crimos cor de fundo para os links nas abas */ 

background: #e0dbdb; 

} 

</style> 


5 .2.5.2 Abas com JavaScript nativo 

Na verdade, nas opções com uso de data-toggle e com uso de JavaScript o mecanis- 
mo do plugin usa JavaScript. A diferença é que para a primeira opção são os me- 
canismos internos do Bootstrap que identificam os atributos da marcação HTML 
e acionam os códigos JavaScript necessários para fazer funcionar a navegação 
em abas e pills e na opção com JavaScript nativo o desenvolvedor precisa definir 
manualmente os métodos JavaScript próprios do Bootstrap para acionar as abas. 

O método nativo para inicializar abas tem a sintaxe conforme mostrada a seguir. 

$( 1 a 1 ) . tab( ' show 1 ) 

onde a identifica o elemento link na navegação da aba. Esses é o único método 
deste plugin e se destina a mostrar e esconder os conteúdos da abas. 


Os eventos nativos são descritos a seguir. 


Evento 

Descrição 

show.bs.tab 

Esse evento ocorre quando o usuário clica uma aba, mas o conteúdo dela ainda não foi mostrado. 

shown.bs.tab 

Esse evento ocorre quando o conteúdo da aba clicada é mostrado. 

hide.bs.tab 

Esse evento ocorre antes de uma aba ser fechada em consequência de o usuário ter clicado em 
outra aba. 

hi.dden.bs.tab 

Esse evento ocorre depois que uma aba foi fechada em consequência de o usuário ter clicado em 
outra aba. 


Em todos estes eventos estão disponíveis as propriedades event . target e event . relatedíarget 
que retornam o URL da aba a ser aberta e o URL da aba ativa (a ser fechada). 

No exemplo a seguir usamos a mesma marcação do exemplo mostrado no item 
anterior [5.2.5.1], retirando apenas o atributo data-toggle da marcação HTML 
conforme mostrado a seguir. 
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• HTML 

1. <body> 

2. <ul class="nav nav-tabs" role="tablist"> 

3. <li role="presentation" class="actlve"xa href="#hone" aria-controls="hone" 

role="tab" data-toggle="tab">Hone</a></U> 

4. <11 role="presentation"><a href="#portfollo" arla-controls="portfolio" role="tab" 

data-toggle="tab">Portfólio</a></li> 

5. <11 role="presentatlon"xa href="#artlgos" arla-controls="artlgos" role="tab" 

data-toggle="tab">Artlgos</a></ll> 

6. <11 role="presentatlon"xa href="#contato" arla-controls="contato" role="tab" 

data-toggle="tab">Contato</a></ll> 

7. </ul> 

8. a 22. <!-- Igual ao exenplo anterior --> 

23. </dlv> <!-- Igual à narcação do Iten [5. 2. 5.1] --> 

[.../c5/abas-javascript.html] 

O código JavaScript é mostrado a seguir. 

• JavaScript 

<scrlpt type="text/javascrtpt"> 

$('a[role="tab"]').on('cllck', functton(e) { 
e.preventDefault; 

$(this).tab('show'); 

}); 

$( ' a [ role="tab" ] ' ).on( 'show.bs.tab' , functlon (e) { 
var tabAbrlr = e.target // Abra a ser aberta 
var tabFechar = e.relatedTarget // Aba ativa a ser fechada 
alert( ' Aba : '+tabAbrlr+ ' vai ser aberta\n\nAba: '+tabFechar+ ' vai ser fechada\n\ 
nEvento: show.bs.tab'); 

}); 

</scrlpt> 

</body> 

</htnl> 

Ao consultar esse arquivo clique os links das abas. Observe a caixa de alerta 
JavaScript a cada clique em uma aba. 
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5.2.6 Tooltip 

No jargão do desenvolvimento web a palavra inglesa tooltip foi traduzida para 
o português como dica de contexto É aquela nossa conhecida funcionalidade que 
permite abrir uma pequena j anela popup, quando o usuário passa o mouse sobre 
uma palavra, contendo um texto explicativo, ou uma dica sobre a palavra. 

Existem duas maneiras de se projetar tooltip: diretamente com uso do par atri- 
buto/valor data-toggle="tooltip" ou codificando com uso de métodos JavaScript 
previstos no Bootstrap. Veremos a seguir essas duas maneiras. 

5.2.6.1 Tooltip com uso de data-toggle 

Para criar um tooltip basta declarar o atributo data-toggle="tooltip" para o elemento 
HTML que deverá ser o Container da palavra que irá disparar o tooltip. O texto da 
tooltip será o valor do atributo title daquele elemento. Observe a seguir a marcação 
típica para criar um tooltip em uma palavra de um texto corrente e em um botão. 

<a href="#" data-toggle="tooltip" title="Fruta tropical">Pupunha</a> 

<button type="button" class="btn btn-default" data-toggle="tooltip" 
title=" Fruta tropical">Pupunha</button> 

Os mecanismos internos do Bootstrap identificam aquele atributo na marcação 
e acionam os códigos JavaScript necessários para fazer funcionar o tooltip. O de- 
senvolvedor não precisa criar código JavaScript, eles são criados automaticamente 
pelo Bootstrap. 

Por padrão o texto do tooltip é na cor branca, inserido em uma caixa na cor 
preta com bordas arredondadas e posicionado na parte superior da palavra que 
dispara o tooltip. 

É possível alterar a posição da caixa com uso do atributo data-placenent e seus 
valores: top, right, botton e left, sendo top o valor padrão. Mostramos a seguir as 
sintaxes para posicionamento. 

// padrão no topo 

<a href="#" data-toggle="tooltip" title="Fruta tropical">Pupunha</a> 

// à direita 

<a href=”#” data-toggle=”tooltip” data-placenient="right" title=”Fruta tropical">Pupunha</a> 

// enbaixo 

<a href=' J #” data-toggle=”tooltip” data-placepient="botton" title=”Fruta tropical”>Pjpjnha</a> 
// à esquerda 

<a href=' J #” data-toggle=”tooltip” data-placepient="left" title=”Fruta tropical”>Pupunha</a> 
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No exemplo a seguir mostraremos a criação de tooltips nas quatro posições 
possíveis. 

• HTML 

<p>As frutas de 

<a href="#" data-toggle="tooltip" title="nédia acima de 10°C. . .">clima temperado</a> 
são ... lenhosos ou 

<a href="#" data-toggle="tooltip" data-placement="left" 

title="plantas trepadeiras lenhosas">lianas</a>. 

Contudo elas não ... 

As principais frutas de clina temperado são a 

<a href="#" data-toggle="tooltip" data-placement-Yight" title="É um fruto . . .">ameixa</a>, 
a ameixa-japonesa, a cereja-doce, o damasco, a 
<a href="#" data-toggle="tooltip" data-placement="bottom" 

title="Nome cientifico: Rubus idaeus">framboesa</a>, a maçã </p> 

/* Mais quatro exemplos com tooltips em botões */ 

• JavaScript 

<script type="text/javascript"> 

$( ' [data - toggle="tooltip" ] ' ) . tooltip( ) ; 

</script> 

</body> 

</html> 

[.../c5/tooltip-alinhamento.html] 

O componente tooltip, mesmo quando criado com uso do atributo data-toggle 
precisa, obrigatoriamente, ser inicializado manualmente pelo desenvolvedor, 
conforme o código JavaScript mostrado, ou seja, deverá ser declarado o método 
tooltipQ para o elemento que o dispara (no nosso exemplo [data - toggle=" tooltip" ]). 

Ao visualizar este exemplo passe o mouse sobre as palavras em destaque (cor 
azul por padrão) no texto e sobre os botões para ver o tooltip em ação nas suas 
quatro posições possíveis. 

5 .2.6.2 Tooltip com JavaScript nativo 

Na verdade, nas opções com uso de data-toggle e com uso de JavaScript o meca- 
nismo do plugin usa JavaScript. A diferença é que para a primeira opção são os 
mecanismos internos do Bootstrap que identificam os atributos da marcação 


Conheça os livros do Maujor: http://livrosdomaujor.com.br 


Capítulo 5 ■ Plugins 


185 


HTML e acionam os códigos JavaScript necessários para fazer funcionar o tooltip 
e na opção com JavaScript nativo o desenvolvedor precisa definir manualmente 
os métodos JavaScript próprios do Bootstrap para acionar o tooltip. 

O método nativo para inicializar um tooltip tem a sintaxe conforme mostrada 
a seguir. 

$( ' seletor ' ) . tooltip(options) 

onde seletor é uma referência ao elemento Container da palavra que dispara o 
tooltip. 


As opções para esse método são: 


Nome 

Tipo 

Default 

Descrição 

animation 

boleano 

true 

Aplica o efeito fade ao mostrar/esconder o tooltip. 

html 

boleano 

false 

0 valor marcação HTML define gue o conteúdo do tooltip será a 
marcação HTML agui definida em lugar de texto simples. 

placement 

string ou 
função 

'top' 

Define o posicionamento do tooltip em relação à palavra 
gue o dispara. Os valores possíveis são: top, right, bottom e 
left. Admite ainda a combinação de auto com um dos quatro 
posicionamentos, por exemplo: 'auto left' que posiciona 
à esquerda quando há espaço à esquerda e à direita caso 
contrário. 

selector 

string 

false 

Essa opção permite que se delegue a função de disparar o 
tooltip a um determinado seletor. Isso faz com que seletores 
inseridos no DOM dinamicamente herdem a funcionalidade 
tooltip. 

title 

string ou 
função 

i i 

Com uso dessa opção podemos definir um texto padrão para 
o tooltip. Para visualizar o texto padrão é necessário que o 
atributo title não seja definido no elemento Container do 
tooltip. Se for definido, sobrescreverá o texto padrão. 

trigger 

string 

'hover focus' 

0 valor para essa opção define o evento que dispara o tooltip. 

Os valores possíveis são: click, hover, focus e manual. É admitido 
usar mais de um valor e nesse caso devem-se separar os valores 
com espaço. 0 valor manual não pode ser combinado com outro 
valor. 

delay 

número ou 
object 

0 

Define o tempo, em milissegundos, de retardo para abertura 
e fechamento do tooltip. Por exemplo, número: delay: 200 ou 
objeto: delay: { show: 100, hide: 200 }. Não se aplica para a 
opção trigger: "manual". 

Container 

string ou 
false 

false 

Define um Container ao qual o tooltip será anexado. Por 
exemplo: Container: '#janelaModal'. 


Conheça os livros do Maujor: http://livrosdomaujor.com.br 


186 


Boostrap 3.3.5 


Nome 

Tipo 

Default 

Descrição 

template 

string 

'<div 

class="tooltip" 

role="tooltip"> 

<div 

class="tooltip- 

arrow"> 

</div> 

<div 

class="tooltip- 

inner"> 

</divx/div>' 

Marcação HTML base a usar para criar um tooltip. 0 valor do 
atributo title será injetado no elemento com a classe tooltip- 
inner, a setinha será injetada no elemento com a classe tooltip- 
arrow. 0 Container geral é no elemento com a classe .tooltip. 

viewport 

string ou 
objectou 
function 

{ selector: 'body', 
padding: 0 } 

Confina o tooltip aos limites do seu elemento. 


São previstos ainda os métodos conforme as sintaxes mostradas a seguir. 

$( ' seletor ' ) . tooltip( "show" ) // Mostra o tooltip 

$( ' seletor ' ) .tooltip( "hide" ) // Esconde o tooltip 

$( ' seletor ' ) .tooltip( "toggle" ) // Alterna nostra/esconde o tooltip 
$( ' seletor ' ) .tooltip( ''destroy") // Esconde e destrói o tooltip 

Os eventos nativos são descritos a seguir. 


Evento 

Descrição 

show.bs.tooltip 

Esse evento ocorre guando o usuário dispara o tooltip, mas o conteúdo dele ainda 
não foi mostrado. 

shown.bs.tooltip 

Esse evento ocorre guando o conteúdo do tooltip é mostrado. 

hide.bs. tooltip 

Esse evento ocorre imediatamente antes de o tooltip ser fechado. 

hidden.bs. tooltip 

Esse evento ocorre depois gue o tooltip foi fechado. 

inserted.bs.tooltip 

Esse evento ocorre depois do evento show.bs.tooltip quando o 
template do tooltip for adicionado ao DOM. 


O exemplo a seguir demonstra a criação de tooltips acionados por JavaScript 
nativo, bem como o uso de algumas opções do método tooltipQ. 

• HTML 

<div class="row"> 

<div class="col -nd -6 um"> 

<h4>0pções : <br> 
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<p>A <a href="#">naçã</a> é una das principais frutas do clina tenperado.</p> 
</div> 

<div class=" col-nd-6 dois"> 

<h4>0pções : <br> 

<p>A <i>naçã</i> é una das principais frutas do clina tenperado.</p> 

</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class=" col-nd-6 tres"> 

<h4>0pções : <br> 

<p>A <a href="#">naçã</a> é una das principais frutas do clina tenperado.</p> 

</div 

<div class=" col-nd-6 quatro"> 

<h4>0pções : <br> 

<p>A <a href="#">naçã</a> é una das principais frutas do clina tenperado.</p> 
</div> 

</div> <!-- /.row --> 

<div class="row"> 

<div class=" col-lg-12 "> 

<p><a href="#" class=''cinco">Clique aqui</a> para nostrar/esconder o segundo 
tooltip da página. </p> 

</div> <!-- /.col-lg-12 --> 

</div> <!-- /.row --> 

[.../c5/tooltip-javascript.html] 

Notar que não há necessidade de se usar atributos data-*. 

O código JavaScript é mostrado a seguir. 

• JavaScript 

<script type="text/javascript"> 

$( 1 . um a' ).tooltip( { 
trigger: ' click ' , 
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title: ' Contém vitaminas BI e B12', 
placement: 1 right ' 

}); 

$(' .dois i').tooltip( { 
html: true, 

title: ' <img src="maca . jpg"> ' , 
placement: 'top' 

}); 

$(' .tres a').tooltip( { 
html: true, 

title: ' <h3>Título do texto</h3><p>Parágrafo com o texto</p>', 
delay: { show: 500, hide: 1000 } 

}); 

$(' .quatro a').tooltip( { 
html: true, 

title: ' <img src="maca. jpg"> ' , 
animation: false 

}); 

$('. cinco'). on('click', function(event) { 
event . preventDefault( ) ; 

$( ' . dois i ' ) . tooltip( ' toggle ' ) ; 

}); 

</script> 

</body> 

</html> 

Ao consultar esse arquivo passe o mouse (ou clique) a palavra maçã em cada um 
dos quatro textos para verificar o disparo do tooltip. 


5.2.7 Popover 

Popover é uma funcionalidade semelhante ao tooltip. Destina-se a fornecer infor- 
mação adicional sobre uma determina palavra de um texto. Enquanto o tooltip 
é indicado para apresentar uma pequena dica informativa o popover destina-se 
a fornecer uma explicação mais detalhada. 
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Existem duas maneiras de se projetar popover: diretamente com uso do par 
atributo/valor data-toggle="popover" ou codificando com uso de métodos JavaScript 
previstos no Bootstrap. Veremos a seguir essas duas maneiras. 

5.2.7.1 Popover com uso de data-toggle 

Para criar um popover basta declarar o atributo data-toggle="popover" para o ele- 
mento HTML que deverá ser o Container da palavra que irá disparar o popover. O 
título do popover será o valor do atributo title e o texto do popover será o valor 
do atributo data-content daquele elemento. Observe a seguir a marcação típica para 
criar um popover em uma palavra de um texto corrente e em um botão. 

<a href="#" data-toggle="popover" title=" Informações nutricionais' 1 
data-content="0 consumo. .. ">maçã</a><button type="button" 
class="btn btn-default" data-toggle="popover" 

title=" Informações nutricionais" data-content="0 consumo. .. ">maçã </button> 

Os mecanismos internos do Bootstrap identificam os atributos data-* na marcação 
e acionam os códigos JavaScript necessários para fazer funcionar o popover. O 
desenvolvedor não precisa criar código JavaScript, eles são criados automatica- 
mente pelo Bootstrap. 

Por padrão o texto do popover é na cor preta, inserido em uma caixa na cor branca 
com uma barra cinza no topo para acomodar o título do popover, as bordas são 
arredondadas e posicionada à direita da palavra que dispara o popover. 

É possível alterar a posição da caixa popover com uso do atributo data-placement e 
seus valores: top, right, bottom e left, sendo right o valor padrão. Mostramos a seguir 
as sintaxes para posicionamento. 

<a href="#" data-toggle="popover" title="Fruta tropical">maçã</a> // padrão à direita 
<a href=”#” data-toggle=”popover” data-placement=‘‘top" ...>maçã</a> //no topo 
<a href="#” data-toggle=”popover” data-placement=“bottom" . . . >maçã</a> / / embaixo 
<a href="#” data-toggle=”popover” data-placement="left" ...>maçã</a> // à esquerda 

No exemplo a seguir mostraremos a criação de popover nas quatro posições 
possíveis. 

• HTML 

<h4>Popover à direita</h4> 

<p>A <a href="#" data-toggle="popover" data-placement="right" 
title=" Informações nutricionais" 

data-content="0 consumo ,..">maçã</a> é uma das principais frutas do clima temperado. </p> 
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<h4>Popover à direita</h4> 

<p>A <a href="#" data-toggle="popover" data-placement="top" 
title=" Informações nutricionais" 

data-content="0 consuno . . . ">naçã</a> é uma das principais frutas do clima temperado. </p> 
<h4>Popover à direita</h4> 

<p>A <a href="#" data-toggle="popover" data-placement="bottom" 
title=" Informações nutricionais" 

data-content="0 consumo ,..">maçã</a> é uma das principais frutas do clima temperado. </p> 
<h4>Popover à direita</h4> 

<p>A <a href="#" data-toggle="popover" data-placement="left" 
title=" Informações nutricionais" 

data-content="0 consumo ,..">maçã</a> é uma das principais frutas do clima temperado. </p> 
/* Mais quatro exemplos com popover em botões */ 

• JavaScript 

<script type="text/javascript"> 

$( ' [data-toggle="popover"]) .popoverQ; 

</script> 

</body> 

</html> 

[.../c5/popover-data-toggle.html] 


Alerta: O funcionamento do componente popover requer a inclusão do plugins 
popover e tooltip. 


O componente popover, mesmo quando criado com uso do atributo data-toggle 
precisa, obrigatoriamente, ser inicializado manualmente pelo desenvolvedor, 
conforme o código JavaScript mostrado, ou seja, deverá ser declarado o método 
popover () para o elemento que o dispara (no nosso exemplo [data-toggle="popover M ] ). 

Ao visualizar este exemplo clique sobre a palavra maçã (cor azul por padrão) nos 
textos para ver o popover em ação nas suas quatro posições possíveis. 

5 .2.7.2 Popover com JavaScript nativo 

Na verdade, nas opções com uso de data-toggle e com uso de JavaScript o meca- 
nismo do plugin usa JavaScript. A diferença é que para a primeira opção são os 
mecanismos internos do Bootstrap que identificam os atributos da marcação 
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HTML e acionam os códigos JavaScript necessários para fazer funcionar o popover 
e na opção com JavaScript nativo o desenvolvedor precisa definir manualmente 
os métodos JavaScript próprios do Bootstrap para acionar o popover. 

O método nativo para inicializar um popover tem a sintaxe conforme mostrada 
a seguir. 

$( ' seletor ' ) . popover(options) 

onde seletor é uma referência ao elemento Container da palavra que dispara o 
popover. 


As opções para esse método são: 


Nome 

Tipo 

Default 

Descrição 

animation 

boleano 

true 

Aplica o efeito fade ao mostrar/esconder o popover 

html 

boleano 

false 

0 valor marcação HTML define gue o conteúdo do 
popover será a marcação HTML agui definida em lugar 
de texto simples. 

placement 

string ou 
função 

'right' 

Define o posicionamento do popover em relação à 
palavra gue o dispara. Os valores possíveis são: top, 
right, bottom e left. Admite ainda a combinação 
de auto com um dos guatro posicionamentos, por 
exemplo: 'auto left’ gue posiciona à esguerda quando 
há espaço à esquerda e à direita caso contrário. 

selector 

string 

false 

Essa opção permite que se delegue a função de disparar 
o popover a um determinado seletor. Isso faz com que 
seletores inseridos no DOM dinamicamente herdem a 
funcionalidade popover. 

title 

string ou 
função 

i i 

Com uso dessa opção podemos definir um título 
padrão para o popover. Para visualizar o título padrão 
é necessário que o atributo title não seja definido 
no elemento Container do popover. Se for definido, 
sobrescreverá o título padrão. 

trigger 

string 

'click' 

0 valor para essa opção define o evento que dispara 
o popover. Os valores possíveis são: click, hover, focus 
e manual. É admitido usar mais de um valor e nesse 
caso devem-se separar os valores com espaço. 0 valor 
manual não pode ser combinado com outro valor. 

content 

string ou 
função 

r r 

Define o conteúdo descritivo do popover desde que o 
atributo data-content não tenha sido definido. 

delay 

número 

ou 

object 

0 

Define o tempo, em milissegundos, de retardo para 
abertura e fechamento do popover. Por exemplo, 
número: delay: 200 ou objeto: delay: { show: 100, hide: 
200 }. Não se aplica para a opção trigger: "manual". 
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Nome 

Tipo 

Default 

Descrição 

Container 

string ou 
false 

false 

Define um Container ao qual o popover será anexado. 

Por exemplo: Container: '#janelaModal'. 

template 

string 

'<div class="popover" 
role=" popover "> 

<div class=" popover-arrow"> 
</div> 

<div class=" popover-inner"> 
</divx/div>' 

Marcação HTML base a usar para criar um popover. 

0 valor do atributo title será injetado no elemento 
com a classe popover-inner, a setinha será injetada 
no elemento com a classe popover-arrow. 0 Container 
geral é no elemento com a classe .popover. 

viewport 

string ou 
objectou 
function 

{ selector: 'body', 
padding: 0 } 

Confina o popover aos limites do seu elemento. 


São previstos ainda os métodos conforme as sintaxes mostradas a seguir. 


$('seletor').popover( "show" ) // Mostra o popover 

$('seletor').popover( "hide" ) // Esconde o popover 

$('seletor').popover( "toggle" ) // Alterna nostra/esconde o popover 
$('seletor').popover( ''destroy") // Esconde e destrói o popover 

Os eventos nativos são descritos a seguir. 


Evento 

Descrição 

show.bs.popover 

Esse evento ocorre quando o usuário dispara o popover, mas o conteúdo 
dele ainda não foi mostrado. 

shown.bs. popover 

Esse evento ocorre quando o conteúdo do popover é mostrado. 

hide.bs. popover 

Esse evento ocorre imediatamente antes de o popover serfechado. 

hidden.bs. popover 

Esse evento ocorre depois que o popover foi fechado. 

inserted.bs. popover 

Esse evento ocorre depois do evento show.bs.popover 
quando o template do popover for adicionado ao DOM. 


A criação de popover com uso de JavaScript é idêntica à criação de tooltip com 
uso de JavaScript como mostrado no exemplo do item [ 52 . 6 . 2 ] . Baseado naquele 
exemplo, sugerimos ao leitor, como exercício, criar uma página exemplo para 
popover com JavaScript. 


5.2.8 Alerta 

Alerta é uma funcionalidade que permite ao desenvolvedor apresentar ao usuário 
uma caixa com mensagem de alerta. 

A marcação típica para criar uma caixa de alerta consta de um div Container ao 
qual se atribui a classe alert. 
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Dentro desse div marca-se um elemento button do tipo button com a classe close, 
o par atributo/valor igual a data-disniss="alert" e a seguir a marcação do título e 
conteúdo da mensagem. 

Essa marcação, conforme mostrado a seguir, cria uma caixa de alerta padrão ou 
de alerta geral, renderizada em tons de amarelo. 

• HTML 

<div class="alert"> 

«button type="button" class="close" data-disniiss="alert">x</button> 

<h4>Alerta!</h4> 

<p>Você tem certeza que deseja detetar o arquivo?</p> 

</div> 

Para fazer funcionar o alerta o desenvolvedor precisa definir manualmente os mé- 
todos JavaScript próprios do Bootstrap. Ao contrário dos componentes estudados 
anteriormente não há disparo de alerta com uso de atributos data-*. 

O método nativo para inicializar um alerta tem a sintaxe conforme mostrada a seguir. 

$( 1 seletor ' ) . alert() 

onde seletor é uma referência ao elemento Container do alerta. 

É previsto ainda o método conforme a sintaxe mostradas a seguir. 

$('seletor').alert("close") // fecha a caixa de alerta 
Os dois eventos nativos são descritos a seguir. 


Evento 

Descrição 

close.bs.alert 

Esse evento ocorre imediatamente após a chamada do 
método alert com a instância close. 

closed.bs.alert 

Esse evento ocorre ao final do fechamento da caixa de alerta (após terem sido 
completadas as transições CSS). 


Para mais informações, uso e exemplos de caixas de alerta ver [4.14] . 


5.2.9 Botões 

A estilização de botões com uso de classes (CSS) foi estudada no capítulo 3 nos 
itens [3.5.1.2] , [3.5.1.3] , [3.5.1.4] e o agrupamento de botões foi estudado no capítulo 4 
no item [4.3] . Neste item do capítulo 5 estudaremos a manipulação de botões 
com uso de JavaScript. 
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São previstos três métodos para manipulação de botões conforme mostrados a 
seguir. 

$(.botaoN).button('toggle') // alterna o estado do botão - ativo/repouso 
$( . botaoN) . button( ' reset 1 ) // retorna o botão ao estado repouso 

$( . botaoN) . button( ' string 1 ) // altera o texto do botão 

onde .botaoN identifica o botão ao qual será aplicado o método. 


Alerta: O método $(' .botaoN) .button( 'loading") está em desuso e será retirado na 
versão BS4. 


No exemplo a seguir mostraremos a aplicação destes três métodos para manipu- 
lação de botões. 

• HTML 

<button type="button" id="botaoToggle" 

class="btn btn-default">Botão con button( ' toggle ' )</button> 

<button type="button" class="btn btn-default">Botão sen button(' toggle 1 )</buttonx/div> 
<div id="botaoReset"> 

<button type="button" class="btn btn-default">Padrão</button> 

<button type="button" class="btn btn-prinary">Prinário</button> 

<button type="button" class="btn btn-success''>Sucesso</button> 

<button type="button" class="btn btn-info">Infornação</button> 

<button type="button" class="btn btn-warning">Atenção</button> 

<button type="button" class="btn btn-danger">Perigo</button> 

</div> 

<button type="button" id="botaoString" class="btn btn-default" 

data-conplete-text="Carreganento teminou!>Padrão</button> 

• JavaScript 

<script type="text/ javascript"> 

// Ao clicar altera a aparência do botão para clicado 
$("#botaoToggle").click(function(){ 

$(this) .button( ' toggle ' ); 

}) 

/* Ao clicar o texto do botão nuda para "loading" 
ao terninar o carreganento o texto volta ao valor inicial */ 

$( "#botaoReset . btn " ) . click(f unction ( ) { 
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$(this).button( ' loading ' ).delay(1000).queue(function(){ 

$(this) . button( ' reset ' ) ; 

$(this).dequeue(); 

}); 

}); 

/* Ao clicar o texto do botão nuda para "loading" ao terminar o carregamento o texto 
muda para o valor do atributo data-complete-text (ver marcação HTML) */ 

$( "#botaoString" ) .click(function( ){ 

$(this) .button( ' loading ' ) . delay( 1000) . queue(function( ) { 

$(this) . button( ' complete ' ) ; 

$(this).dequeue(); 

}); 

}); 

</script> 

</body> 

</html> 

[.../c5/botoes-javascript.html] 

Ao visualizar este exemplo clique os botões para ver os métodos JavaScript em ação. 


5.2.10 Collapse 

Collapse é uma funcionalidade destinada a criar o efeito revelar/esconder para 
apresentação de conteúdos. 

Existem duas maneiras de se projetar este efeito: diretamente com uso do par 
atributo/valor data-toggle="collapse" ou codificando com uso de métodos JavaScript 
previstos no Boostrap. Veremos a seguir essas duas maneiras. 

5.2.10.1 Collapse com uso de data-toggle 

Para criar este efeito usa-se uma marcação padrão com classes nativas do Bootstrap 
e a declaração do atributo data-toggle="collapse" para um elemento a ou button que 
deverá marcar o link que irá revelar/esconder os conteúdos. 

Se for usado o elemento a, seu atributo href deverá ter valor igual ao valor do ld 
do Container dos conteúdos a revelar/esconder. 

Se for usado o elemento button ele deverá receber o atributo data-target com valor 
igual ao valor do id do Container dos conteúdos a revelar/esconder. 
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Os mecanismos internos do Bootstrap identificam os atributos data-* e as classes 
definidas na marcação e acionam os códigos JavaScript necessários para fazer 
funcionar o efeito. O desenvolvedor não precisa criar código JavaScript, eles são 
criados automaticamente pelo Bootstrap. 

No exemplo a seguir mostraremos a criação do efeito revelar/esconder simples 
acionado por um link ou por um botão e o uso deste efeito para criar um menu 
acordeão com três links marcados com elementos a e ao qual atribuímos a 
classe="btn" fazendo com que os links fossem estilizados como um botão. 

A marcação HTML para o exemplo é mostrada e comentada a seguir. 

• HTML 

// Exenplo de collapse sinples 

1. <a data-toggle="colapse" href="#colapseUm">Maçã</a> 

2. <button class="btn btn-prinary" type="button" data-toggle="collapse" 

data-target="#colapseUn" aria-expanded="false">Maçã</button> 

3. <div id="colapseUn" class="collapse"> 

4. <div class="weU"> 

5. <p><ing src="collapse-naca. jpg" alt="maçã" class="pull-left">A maçã. . .</p> 

6. <small>Fonte : Wikipedia</smaLl> 

7. </div> <!-- /. well --> 

8. </div> <!-- /#colapseUn --> 

// Exenplo de collapse para criar nenu acordeão 

13. <div class="panel-group" id="accordion" role="tablist" aria-nultiselectable="true"> 

14. <div class="panel panel-default"> 

15. <div class="panel-heading" role="tab" id="headingLaranja"> 

16. <h4 class="panel-title"> 

17. <a class="btn btn-info" role="button" data-toggle= "collapse" 

data-parent="#accordion" href="#collapseLaranja" aria-expanded="true" 
aria-controls="collapseLaranja">Laranja</a> 

18. </h4> 

19. </div> 

20. <div id="collapseLaranja" class=''panel-collapse collapse in" role="tabpanel" 

aria-labelledby="headingLaranja"> 

21. <div class="panel-body"> 

22. <p><ing src="collapse-laranja. jpg" alt="laranja" class="pull-left">A laranja 
é . . ,</pxsnall>Fonte: Wikipedia</snall> 

23. </di v> 

24. </div> 
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25. </div> <! -- /.panei --> 

26. <div class="panel panel-default"> <!-- painel 2 - -></div> <!-- /.panei --> 

27. <div class="panel panel-default"> <!-- painel3 - -></div> <!-- /.panei --> 

28. </div> <!-- /.panel-group --> 

[.../c5/collapse-data-toggle.html] 

Alerta: O funcionamento do componente collapse requer a inclusão do plugins 
collapse e transition. 


Código comentado: 


Linha(s) Descrição 


Linhas 1 a 7 
Linha 1 


Linha 2 


Linhas 3 
Linhas 4 

Linhas 5 e 6 
Linhas 7 e 8 
Linhas 13 a 28 
Linha 13 


Linhas 14 a 25 


Linha 15 a 19 


Linha 16 a 18 


Marcação de um painel revelar/esconder simples. 

Link para acionar o efeito revela/esconde. O par atributo/valor data- 
toggle="collapse" é obrigatório e o atributo href deve apontar para o id 
do Container do conteúdo a revelar/esconder (linha 3). 

Botão para acionar o efeito revelar/esconder. O par atributo/valor 
data-target="colapseUn" é obrigatório e deve ser igual ao valor do id do 
Container do conteúdo a revelar/esconder (ver linha 3). 

Container geral para o conteúdo a revelar/esconder. É obrigatório 
definir, para esse Container, a classe com valor collapse. 

Container que usa a classe well prevista no Bootstrap com a finalidade 
de criar e estilizar uma caixa com bordas arredondadas e cor de fundo 
(ver componente Well em [4.20]). 

Conteúdo a revelar/esconder. 

Tags de fechamento dos containeres well e geral. 

Marcação de três painéis revelar/esconder para criar o menu acordeão. 
Container geral do menu que deverá, obrigatoriamente, receber a classe 
panel-group e um id de livre escolha. O valor do id será igual ao valor do 
atributo data-parent marcado em cada um dos links (ou botões) que 
acionam o efeito revelar/esconder, (ver linha 17) 

Container geral do primeiro painel que compõe o menu. Nas linhas 
26 e 27 encontram-se os outros dois painéis cuja marcação HTML foi 
omitida por ser semelhante à deste primeiro painel. 

Container geral do link ou botão destinado a revelar/esconder o con- 
teúdo de cada painel. Notar que o valor do atributo id deste Container 
deverá ser igual ao valor do atributo aria-labelledby do Container geral 
do cojnteúdo a revelar/esconder (ver linha 20). 

Elemento h4 Container do link para revelar/esconder. 
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Linha(s) Descrição (cont.) 

Linha 17 Container do link que aciona o revelar/esconder. O atributo href deste 

link aponta para o id do Container geral do conteúdo a revelar/ esconder 
(ver linha 20). 

Linhas 20 a 24 Container geral do conteúdo a revelar/esconder. A classe in neste Con- 
tainer destina-se a fazer com que este conteúdo seja apresentado à vista 
(revelado ou aberto) quando a página for carregada. 

Linhas 21 a 23 Container corpo dos conteúdos a revelar/esconder. Notar que neste 
Container pode-se inserir qualquer tipo da marcação HTML e no nosso 
exemplo mostramos uma imagem em cada painel, além de textos. 


5.2.10.2 Collapse com JavaScript nativo 

Na verdade, nas opções com uso de data-* e com uso de JavaScript o mecanismo do 
plugin usa JavaScript. A diferença é que para a primeira opção são os mecanismos 
internos do Bootstrap que identificam os atributos da marcação HTML e acionam 
os códigos JavaScript necessários para fazer funcionar o efeito revelar/esconder e 
na opção com JavaScript nativo o desenvolvedor precisa definir manualmente os 
métodos JavaScript próprios do Bootstrap para acionar o accordion. 

O método nativo para inicializar o efeito tem a sintaxe conforme mostrada a seguir. 

$( 1 seletor ' ) .collapse() 

onde seletor é uma referência ao elemento Container do conteúdo a revelar/es- 
conder. 

As opções para esse método são: 


Nome 

Tipo 

Default 

Descrição 

parent 

selector 

false 

Define o elemento-pai para o efeito revelar/esconder. 

toggle 

boleano 

true 

Altera a visibilidade do conteúdo guando acionado. 


São previstos ainda os métodos conforme as sintaxes mostradas a seguir. 

$( ' seletor ' ).collapse( "show") // revela o conteúdo 
$( ' seletor ' ).collapse( "hide") // esconde o conteúdo 
$('seletor')-collapse("toggle") // alterna revelar/esconder o conteúdo 
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Os quatro eventos nativos são descritos a seguir. 


Evento 

Descrição 

show.bs.collapse 

Esse evento ocorre imediatamente após a chamada do método collapse com a instância 
show. 

shown.bs.collapse 

Esse evento ocorre ao final da abertura de um conteúdo (após terem sido completadas as 
transições CSS). 

hide.bs.collapse 

Esse evento ocorre imediatamente após a chamada do método hide(). 

hedden.bs.collapse 

Esse evento ocorre ao final do fechamento de um conteúdo (após terem sido completadas 
as transições CSS). 


A obtenção do efeito revelar/esconder com uso de JavaScript é idêntica à criação 
de tooltip com uso de JavaScript como mostrado no exemplo do item [52.6.2]. 
Baseado naquele exemplo, sugerimos ao leitor, como exercício, criar uma página 
exemplo para o efeiot revelar/esconder com JavaScript. 


5.2.11 Carousel 

Carousel é uma funcionalidade que se destina a criar um slideshow acionado 
com uso de um efeito semelhante a um carrossel. 

Existem duas maneiras de se projetar o efeito carrossel: diretamente com uso 
de marcação padrão e de atributos classe e data -ride ou codificando com uso de 
métodos JavaScript previstos no Bootstrap. Veremos a seguir essas duas maneiras. 

Todas as imagens a serem mostradas no slideshow carrossel devem ter as mesmas 
dimensões (largura x altura). A largura deverá ser igual ou maior a maior largura 
assumida pelo Container do carrossel e a altura é de livre escolha do autor, isto é, 
o Bootstrap não estabelece uma razão de aspecto para as imagens. 

Por exemplo: se o carrossel foi projetado para ocupar toda a largura de uma linha 
(div. row) as imagens deverão ter uma largura total igual (ou maior) do que 1170px 
pois esta é a maior largura de uma linha para resoluções acima de 1200px que é o 
maior breakpoint do Bootstrap. Se o carrossel foi projetado para ocupar a metade 
de uma linha a largura das imagens deverá ser igual à largura correspondente 
à união de seis colunas adjacentes (aproximadamente 600px), pois uma linha 
contém 12 colunas. 
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5.2.11.1 Carousel com uso de data-ride 

Para criar o efeito carrossel em um slideshow usa-se uma marcação padrão com 
classes nativas do Bootstrap e a declaração do atributoo data-ride e de classes. 

Os mecanismos internos do Bootstrap identificam os atributos e as classes defini- 
das na marcação e acionam os códigos JavaScript necessários para fazer funcionar 
o carrossel. O desenvolvedor não precisa criar código JavaScript, eles são criados 
automaticamente pelo Bootstrap. 

No exemplo a seguir mostraremos a criação de um slideshow com uso do plugin 
Carousel. 

• HTML 

1. <div id="meuCarrossel'' class="carousel slide" data-ride="carousel"> 

2. <ol class="carousel-indicators"> <!-- "Bolinhas" da navegação pelos slides --> 

3. <li data-target="#neuCarrossel" data-slide-to="0" class="active"></li> 

4. <li data-target="#neuCarrossel" data-slide-to="l"></li> 

5. <!-- nais três indicadores --> 

6. <li data-target="#neuCarrossel" data-slide-to="5"></li> 

7. </ol> 

8. <div class="carousel-inner" role="listbox"> <!-- Container dos slides --> 

9. <div class="iten active"> 

10. <img src="cl.jpg" alt=""> 

11. <div class="carousel-caption"> 

12. <h4>Slide l</h4> 

13. <p>Lorem ipsun dolor sit anet, consectetuer adipiscing elit . </ p> 

14. </div> 

14. </div> 

15. <div class="iten"> 

16. <img src="c2.jpg" alt=""> 

17. <div class="carousel-caption"> 

18. <h4>Legenda 2</h4> 

19. <p>Curabitur hendrerit erat ut augue. Cras gravida . </ p> 

20. </div> 

21. </div> 

22. <div class="iten"> 

23. <!-- seguen nais quatro slides --> 

22. </div> 

23. </div> <!-- /.carousel-inner --> 
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24. <a class="left carousel-control" href="#neuCarrossel" data-slide="prev" role="button"> 
<span class="glyphicon glyphicon-chevron-left" aria-hídden="true"x/span> 

<span class="sr-only">Anterior</spanx/a> 

25. <a class="right carousel-control" href="#rieuCarrossel" data-slide="next" 

role="button" > 

<span class="glyphlcon glyphicon-chevron-right" aria-hidden="true"x/span> 

<span class="sr-only">Próxlno</span> 

</a> 

26. </div> <!-- /ífmeuCarrossel --> 


[.../c5/carrossel-data-ride.html] 

Código comentado: 


Linha(s) Descrição 


Linhas 1 e 26 


Linhas 2 a 7 


Linhas 8 e 23 
Linhas 9 e 14 


Linhas 11 e 14 
Linhas 24 e 25 


Container geral do carrossel. Deverá receber a classe de estilização 
prevista no Bootstrap denominada carousel. Adicionalmente declare 
a classe slide para permitir a transição dos slides com o efeito de mo- 
vimentar lateralmente. Se essa classe não for definida a transição será 
abrupta. Definir também o atributo id com valor de livre escolha do 
autor. Esse valor servirá de referência para definir o valor do atributo 
data-target conforme mostrado nas linhas 3 a 6 e também será o valor 
do atributo target dos links ‘Anterior” e “Próximo” (ver linhas 24 e 25). 
No nosso exemplo escolhemos o valor id="meuCarrossel" para o Container 
geral do carrossel (ver linha 1). 

Lista destinada a criar os indicadores de imagem ativa (as bolinhas 
de navegação pelas imagens). O quantidade de itens lt nesta lista é 
igual à quantidade de slides. Na marcação desta lista definir, tal como 
mostrado na marcação, os atributos class, data-target e data-slide-to. 
O valor do atributo data-slide-to deverá ser uma sequência númerica 
iniciando em zero. 

Container interno para o carrossel. Definir a classe carousel-inner. 

Container para cada imagem e sua legenda. Definir a classe item e a 
classe active para determinar a primeira imagem a aparecer no carrossel 
(imagem de capa). 

Container geral para a legenda da imagem. Definir, para esse Container, 
a classe carousel-caption. 

Cria as setas para manualmente acionar o carrossel para a esquerda 
ou direita. 


Na marcação HTML que demonstra este exemplo uma folha de estilos incorpo- 
rada com apenas duas regras de estilos como mostrada a seguir foi comentada. 
Estas regras de estilos criam um efeito na legenda dos slides. Para visualizar o 
efeito, descomente as regras. 
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• CSS 

<style rel="stylesheet"> 
h2 {font-size:20px;} 
.carousel-caption { 
botton: 0; 
right: 0; 
left: 0; 

padding : 0 5px 30px 5px; 
background: rgba(0,0,0, .6); 

} 

.carousel-indicators { botton: 0; } 
</style> 


5.2.1 1 .2 Carousel com JavaScript nativo 

Na verdade, nas opções com uso de marcação padrão e com uso de JavaScript o 
mecanismo do plugin usa JavaScript. A diferença é que para a primeira opção são 
os mecanismos internos do Bootstrap que identificam os atributos da marcação 
HTMLe acionam os códigos JavaScript necessários para fazer funcionar o carrossel 
e na opção com JavaScript nativo o desenvolvedor precisa definir manualmente 
os métodos JavaScript próprios do Bootstrap para acionar o carrossel. 

O método nativo para inicializar um carrossel tem a sintaxe conforme mostrada 
a seguir. 

$('seletor').carousel() 

onde seletor é uma referência ao elemento Container do carrossel. 


As opções para esse método são: 


Nome 

Tipo 

Default 

Descrição 

interval 

número 

5000 

Tempo de espera em milissegundos para haver a transição 
automática para a próxima imagem. Definir o valor false para 
essa opção interrompe a transição automática. 

pause 

string 

'hover' 

Ação do usuário necessária para pausar o slideshow. A ação 
padrão ('hover') é colocar o mouse sobre a imagem para pausar e 
retirar o mouse para continuar. 

wrap 

boleano 

'true' 

Define se a movimentação dos slides será infinita ou apenas um 
ciclo e parar. 

keybord 

boleano 

'true' 

Define se os comandos avançar/recuar dos slides serão ou não 
controlados pelas setas do teclado. 
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$('seletor').carousel( "cycle" ) // movimenta os slides da esquerda para a direita 
$('seletor').carousel( "pause")// pausa o movimento dos slides 

$('seletor').carousel(nunber) // movimenta os slides para o slide nunber (0,1, 2, 3 etc.) 
$('seletor').carousel("prev") // movimenta para o slide anterior ao atual 
$('seletor').carousel("next") // movimenta para o slide posterior ao atual 

Os dois eventos nativos são descritos a seguir. 


Evento 

Descrição 

slide.bs.carousel 

Esse evento ocorre no início da movimentação dos slides. 

slid.bs.carousel 

Esse evento ocorre ao final da transição do slide. 


Nestes dois eventos estão disponíveis as propriedades direction e event.relatedTarget 
que retornam a direção de movimentação (left ou right) e o elemento, respecti- 
vamente, do slide que se tornou ativo. 

No exemplo a seguir usamos a mesma marcação do exemplo mostrado no item 
anterior [5.2.11.1], retirando apenas o atributo data- ride da marcação HTML e cria- 
mos comandos para o slideshow usando algumas das funcionalidades JavaScript 
aqui estudadas. O script constante do exemplo é mostrado a seguir. 

• JavaScript 

<script type="text/javascript"> 

$( '#meuCarrossel' ).carousel( 

{ 

interval: 500, 
wrap: false, 
keyboard: false 

}); 

$('#pieuCarrossel').on('slide.bs.carousel', function () { 
console. log( 'Inicio da movimentação do slide'); 

}) 

$('#pieuCarrossel').on('slid.bs.carousel', function () { 
console. log( ' Fim da movimentação do slide'); 

}); 

</script> 

[.../c5/carrossel-javascript.html] 
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Sugerimos ao leitor, como exercício, criar uma cópia do arquivo deste exemplo e 
explorar as demais funcionalidades JavaScript para o plugin carousel escrevendo 
seus próprios Scripts. 


5.2.12 Affix 

Affix é uma funcionalidade destinada a manter um Container fixo em uma posição 
na página, ou seja, se o usuário aciona a barra de rolagem da página o Container 
não se movimenta. 

Existem duas maneiras de se projetar o efeito affix: diretamente com uso de 
marcação padrão e de atributos data-spy ou codificando com uso de métodos 
JavaScript previstos no Bootstrap. Veremos a seguir essas duas maneiras. 

5.2.12.1 Affix com uso de data-spy 

Para criar o efeito affix usa-se uma marcação padrão com declaração do atributos 
data-spy. 

Os mecanismos internos do Bootstrap identificam os atributos definidos na mar- 
cação e acionam os códigos JavaScript necessários para manter o Container fixo 
na página. O desenvolvedor não precisa criar código JavaScript, eles são criados 
automaticamente pelo Bootstrap. 

No exemplo a seguir mostraremos a criação de um menu fixo na tela com uso 
da funcionalidade affix. 

• HTML 

<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="265"> 

<ü><a href="#tp">Topo</ax/lí> 

<ü><a href="#un">Link l</a></U> 

<ü><a href="#dois">Link 2</a></U> 

<U><a href="#tres">Link 3</a></U> 

<H><a href="#quatro">Link 4</a></lí> 

<U><a href="#cinco">Link 5</a></U> 

</ul> 

<h2 id="um">Link l</h2> 

<p>Loren ipsun. . ,</p> 

<h2 id="dois">Link 2</h2> 

<p>Pellentesque sapien . . .</p> 
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<h2 id="tres">Link 3</h2> 

<p>Nulla facUisi. . ,</p> 

<h2 id="quatro">Link 4</h2> 

<p>Curabitur hendrerit. . .</p> 

<h2 id="cinco">Link 5</h2> 

<p>Cum sociis natoque. . .</p> 

[.../c5/affix-data-spy.html] 

Definimos o atributo data-spy="affix" para o Container do elemento a manter fixo 
na página (no nosso exemplo o menu) e o atributo data-offset-top que define a 
quantidade de pixels a rolar a partir da qual o Container será mantido fixo na 
sua posição original. 

Pode-se usar qualquer tipo de dispositivo de navegação, previsto ou não no Boots- 
trap, contudo essa funcionalidade não tem uma estilização padrão nativa. O autor 
deverá criar uma folha de estilos conforme suas necessidades. Neste exemplo a 
folha de estilos está incorporada à marcação da página. 

Consulte o exemplo, verifique o funcionamento e depois comente a folha de 
estilos voltando a verificar o funcionamento. 

5.2.12.2 Affix com JavaScript nativo 

Na verdade, nas opções com uso de marcação padrão e com uso de JavaScript o 
mecanismo do plugin usa JavaScript. A diferença é que para a primeira opção são 
os mecanismos internos do Bootstrap que identificam os atributos da marcação 
HTML e acionam os códigos JavaScript necessários para tornar o Container fixo 
e na opção com JavaScript nativo o desenvolvedor precisa definir manualmente 
os métodos JavaScript próprios do Bootstrap para fixar o Container. 

O método nativo para inicializar um affix tem a sintaxe conforme mostrada a 
seguir. 


$( 1 seletor 1 ) . affix( ) 

onde seletor é uma referência ao elemento Container a manter fixo. 
A duas opções para esse método é: 


Nome 

Tipo 

Default 

Descrição 

offset 

número ou função ou 
objeto 

10 

Define a posição, em número de pixels, do Container 
(no nosso exemplo um menu) fixo em relação ao topo 
da tela. As coordenadas são top, right, bottom e left. 

Por exemplo: offset: { top:20 }. 
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Nome 

Tipo 

Default 

Descrição 

target 

seletorounóou 
elemento jQuery 

0 objeto window 

Define o elemento em relação ao qual o Container (no 
nosso exemplo um menu) será fixo. 


No exemplo a seguir usamos a mesma marcação do exemplo mostrado no item 
anterior [5.2.12.1], retirando apenas os atributos data-spy e data-offset da marcação 
HTML e criamos comandos para o acionar o affix usando algumas das funcio- 
nalidades JavaScript aqui estudadas. A retirada dos atributos da marcação HTML 
e o script constante do exemplo é mostrado a seguir. 

• HTML 

<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="265"> 

Nessa opção não se usam os atributos data-*. 

• JavaScript 

<script type=" text/ javascri.pt "> 

var offset = $(' .nav').position().top; 

$(' .nav').affix({ 
offset: offset 

}); 

</script> 

[.../c5/affix-javascript.html] 

Notar que com uso de JavaScript podemos inspecionar dinamicamente as coorde- 
nadas do Container (no nosso exemplo um menu), com uso do método positíonQ 
da jQuery, e defini-la com uso da opção offset. 
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CAPÍTULO 6 

Criando um layout com Bootstrap 


Neste capítulo, iremos aplicar as funcionalidades do framework para criar um 
layout a partir da imagem fornecida pelo designer do site. 


6.1 Introdução 

É quase certo que as regras-padrão de estilização previstas na folha de estilo do 
Bootstrap não sejam adequadas ao design do site que você pretende desenvolver. 
Existem três opções básicas de personalizar a folha de estilo do Bootstrap para 
atender às necessidades específicas de um projeto. 

A primeira opção é fazer o download personalizado no site do Bootstrap em 
http://getbootstrap.com, a segunda é alterando as variáveis LESS de acordo com 
suas necessidades e a terceira opção é fazer o download completo do framework 
Bootstrap (foi a opção que adotamos para criar os exemplos deste livro) e proje- 
tar uma folha de estilo personalizada para as necessidades do projeto, conforme 
mencionamos no item 1.3, quando dissemos que era sugerido que essa folha de 
estilo fosse nomeada como custom.css. Tal folha deverá ser vinculada ao documento 
depois da folha de estilos do Bootstrap, conforme mostrado a seguir. 


<title>Título da página</title> 

<ünk rel="stylesheet" href="css/bootatrap.min.css"> 

<link rel="stylesheet" href="css/custon.css"> 


A finalidade desta folha de estilo é a de sobrescrever os estilos-padrão do Bootstrap, 
adaptando-os às necessidades do projeto. Veja o exemplo a seguir. 
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Vimos no item 3.1 que a marcação HTML para criar um botão é a mostrada a seguir. 


<button type=”button” class="btn btn-default">Botão básico</button> 

Esta marcação cria um botão básico que é renderizado com cor de fundo branca, 
borda cinza arredondada e texto na cor preta. No estado hover a cor de fundo 
do botão é cinza. Abrindo a folha de estilos bootstrap.css localizada na pasta css 
do Bootstrap em editor de texto e nela localizando os seletores . btn e .btn-default 
encontramos as declarações CSS que criam (estilizam) o botão básico. No trecho 
de código a seguir, retirado daquela folha de estilo, mostramos as regras CSS para 
aqueles seletores. 

.btn { 

display: Inllne-block; 
padding : 6px 12px; 
font-size: 14px; 
background-image: none; 
border: lpx solid transparent; 
border-radius: 4px; 

/* nais declarações CSS */ 

} 

.btn-default { 
color: #333; 
background-color: #fff; 
border-color: #ccc; 

} 

Conforme estudado neste livro, sabemos que existem várias classe nativas desti- 
nadas a estilizar os botões em diferentes cores e dimensões. 

Suponha que no seu projeto os botões básicos foram definidos pelo designer com 
a cor de fundo preta (black), a cor do texto verde (lime) e borda na cor vermelha 
(red) com cantos vivos. 

Neste caso, para personalizar os botões, basta que você declare, no arquivo custam, 
css, regras CSS para atender aquela estilização, conforme mostrado a seguir. 

.btn-default { 

color: Une; 

background-color: black; 

border-color:red; 

border-radius:0; 

} 
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Assim, você criou um conflito de regras CSS contidas em dois arquivos separa- 
dos servidos à mesma página. Resolve-se conflito de regras CSS aplicando-se os 
critérios da especificidade e do efeito cascata respectivamente, ou seja, vence a 
regra mais específica, e se houver empate, como é o caso do nosso exemplo, vence 
o efeito cascata. 

Como lincamos à página o arquivo app.css depois do arquivo bootstrap.min.css, a 
regra contida naquele arquivo é a vencedora e o botão básico terá uma estilização 
personalizada. 

Consulte o arquivo [.../c6/botao-basico-personalizado.html] para verificar essa per- 
sonalização do botão básico. 

Neste capítulo, iremos criar um layout personalizando com uso de uma folha de 
estilos do tipo custom.css-, contudo, para facilitar o estudo, a folha de estilo será 
incorporada na seção head da página e não lincada, como deve ser em um caso real. 

Uma ferramenta indispensável para criação de uma folha de estilos personalizada 
é o console do navegador, que poderá ser instalado como complemento, como 
é o caso do Firebug, ou ser nativo do navegador, como é o caso da maioria dos 
navegadores modernos. Não é do escopo deste livro ensinar o uso de consoles de 
navegador, mas o leitor necessariamente deverá saber usar pelo menos os painéis 
de inspeção e edição do HTML e das CSS integrantes do console. 


Dica: O Zeno Rocha criou vídeos no YouTube que ensinam de forma bem didática 
como usar o console do navegador. Assista os vídeos em http://kwz.me/JR. 


O console do navegador mostra ao autor quais são as regras CSS constantes da 
folha de estilo do Bootstrap aplicadas em determinado elemento da marcação 
HTML e consequentemente qual seletor usar na personalização. 

6.2 Layout iMasters 

Para ilustrar este capítulo, usaremos parte do layout da Home Page do iMasters 
(. http://kwz.me/vZ ) com o aspecto que ela apresentava há um tempo atrás e que 
pode ser visualizada na figura 6.1. 

Note na figura que a largura máxima de alguns conteúdos da página é fixa (940px) 
e que a cor de fundo de algumas barras do layout ocupam 100% da janela do 
navegador. 
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Figura 6.1 - Home page iMasters (parte). 

Consideramos para o propósito deste capítulo interromper o layout no final da 
barra superior das notícias como mostrado na figura. Trata-se apenas do início 
do layout, mas apresenta uma configuração compatível e suficiente para cumprir 
os objetivos deste capítulo. Fica como sugestão ao leitor, a título de exercício e 
fixação dos seus estudos, criar as partes do layout abaixo da barra de notícias. 

Todas as imagens do layout estão disponíveis na pasta imagens que se encontra 
dentro da pasta imasters no diretório c6 na pasta do download dos arquivos de 
exemplos deste livro. 

Antes de prosseguir, consulte o arquivo [...Ic6limasterslimasters.html] e visualize a 
home page completa do site do iMasters, da qual foi extraída a imagem mostrada 
na figura 6.1 e que servirá de base para as técnicas estudadas neste capítulo. 

Conforme estudamos no item [3.1], o Bootstrap prevê um sistema de grid para 
construção de layout que por padrão se estende até uma largura máxima igual a 
1170px em larguras de viewport maiores do que 1200px. O espaçamento entre cada 
coluna é obtido com a definição de um padding lateral (à esquerda e à direita) igual a 
15 px, resultando em um espaçamento entre colunas igual a 30px. Assim, somados 
o padding lateral esquerdo da primeira coluna e o padding lateral direito da última 
coluna, a largura máxima para o conteúdo do layout é de 1170px - 30px = 1140px. 
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Afigura 6.2 apresenta um esquema mostrando as dimensões horizontais do grid- 
-padrão, conforme descrito. 


. padding = 15px — 

padding = 

padding 

! ! 

! L 

! _ | 

i i 
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i i 
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Figura 6.2 - Esquema do grid-padrão. 

É fácil personalizar a largura de um layout para diferentes breakpoints, pois, 
conforme estudamos no item 3.1.1 uma aplicação desenvolvida com Bootstrap 
deverá estar contida em um elemento Container geral que recebe a classe de 
nome Container. É esse Container que define a largura máxima do layout para os 
diferentes breakpoints. 

Inspecionando a folha de estilos do Bootstrap, encontramos as seguintes regras 
CSS para o seletor de classe .Container. 

@nedia (min -width : 768px) { 

.Container { 
width: 750px; 

} 

} 

@nedia (min -width : 992px) { 

.Container { 
width: 970px; 

} 

} 

@nedia (nin-width: 1200px) { 

.Container { 
width: 1170px; 

} 

} 

Então, para definir uma largura de conteúdo máxima para o layout igual a 940px 
(largura máxima do layout do iMasters), basta criar a seguinte regras CSS na folha 
de estilos personalizada da nossa aplicação. 
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©media (min-width: 1200px) { 

.Container { 

width: 970px; /* 970px - 30px = 940px */ 

} 

} 


Alerta: Em nosso exemplo, não iremos alterar a largura máxima do layout para 
940px como é a largura do site do iMasters, pois não existe qualquer prejuízo 
em se adotar a largura máxima padrão do Bootstrap que é de 1130px. 


Por razões didáticas, vamos mostrar a criação do layout por etapas, conforme 
descritas nos itens que se seguem. 


6.2.1 Primeira etapa: navegação superior 

O template para o desenvolvimento do layout é conforme estudamos no item [1.4] , 
contudo por tratar-se de personalização não usaremos o arquivo bootstrap-themexss. 

No topo do layout existe um mecanismo de navegação constante de links para 
seções do site, links para redes sociais em forma de ícones e link para login e 
cadastro. Na parte superior deste mecanismo de navegação existe uma bar rinha 
superior decorativa com três seções em cores diferentes. Note que a cor de fundo 
da página é cinza-clara. 

Abarrinha superior decorativa será construída com uso de um elemento div com 
a classe barrinha-superior ao qual será aplicada uma cor de fundo constituída por 
um gradiente CSS, conforme os códigos mostrados a seguir. 

• HTML 

<body> 

<div class="container"> 

<div class="barrinha-superior"></div> 


Notar que não há necessidade de se criar uma linha (<div class="row">. . .</div>) 
para inserção da barrinha superior, ela pode ser elemento-filho do Container 
geral div. Container. 
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body { background: #f 5f 5f 5 ; } /* cor de fundo da página */ 

.barrinha-superior { 
height: 4px; 

background: #369caf; /* fallback para navegadores que não suportam gradientes */ 
background-image: Unear-gradient( to right, #369caf 33.33%, #e37900 33.33%, 
#e37900 66.66%, #af2d22 66.66%, #af2d22 ); 

/* use a mesma declaração com uso de prefixos proprietários se for o caso */ 


Alerta: Notar que embora a barrinha superior seja constituída por três faixas 
sequenciais de cores sólidas diferentes as funcionalidades dos gradientes CSS 
possibilitam a obter aquele efeito. 


Para criar o mecanismo de navegação superior, usaremos o componente do Boots- 
trap denominado barra de navegação básica estudada no item [4.7.1], e marcada 
conforme o código mostrado a seguir. 

• HTML 

<div class=”row”> 

<div class="col-md-12"> 

<nav class="navbar navbar-default" id="nav-superior"> 

<div class="navbar-header"> 

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
data-target="#barraSuperior"> 

<span class=" sr-only ">Toggle navigation</span> 

<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

</button> 

<a class="navbar-brand hidden-lg hidden -md hidden-sm" href="#" 
data-toggle="collapse" data - target="#barraSuperior">Menu</a> 

</div> 

<div class="collapse navbar-collapse" id="barraSuperior"> 

<ul class="nav navbar-nav"> 

<lixa href="#"ximg src="imagens/icon-navsup.png" alt="logotipo do site"x/ax/li> 
<li><a href="#">Portal</ax/li> 

<!-- mais sete itens --> 

</ul> 
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<ul class="nav navbar-nav navbar-right"> 

<li><a href="#" title="facebook"><ing src-hnagens/facebook.png" 
alt="facebook"x/a></U> 

<!-- ciais cinco itens --> 

<li><a href="#">Faça Login / Cadastre-se</a></li> 

</ul> 

</div>< ! - - /.navbar-collapse --> 

</nav> 

</div> 

</div> <!-- /.row --> 


Alerta: Notar que para o Container geral da barra de navegação definimos o de 
nossa escolha (não padrão do Bootstrap) id="nav-superior". Fizemos isso para 
diferenciar da outra barra de navegação que existe no layout, como veremos 
adiante. 


[.../c6/imasters1.html] 

Nesta etapa, a barrinha de topo estará estilizada e a barra de navegação será 
renderizada com a estilização padrão do Bootstrap. 

Observe na figura 6.3 o resultado da primeira etapa. 

0 Portal Fórum 7Masters Ferramentas Cursos online Agenda Revista iMasters interCon 

D Q 0 H EÜ3 ES Faça L °9 in / Cadastre-se 

Figura 6.3 - Primeira etapa da criação do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. 


6.2.2 Segunda etapa: personalização da barra de topo 

Ao término da primeira etapa, construímos a barrinha colorida superior e a barra 
de navegação estilizada segundo o padrão de estilos do Bootstrap. 

Nesta etapa, criaremos as regras de estilo personalizadas, conforme mostradas e 
comentadas a seguir. 

• css 

1. #nav-superior { background : #ff f ; } 
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2. #nav-superior lia ( padding : 2px 4px; } 

3. #nav-superior li aihover { color:#00f; } 

4. (anedia (nin-width: lpx) { 

5. .navbar { 

6. nin - height : auto; 

7. nargin : 0; 

8. border : none; 

9- } 

10. .navbar li a { color:#333; } 

11 . } 

[.../c6/imasters2.html] 

Código comentado: 

Linha Descrição 

Linha 1 Esta declaração sobrescreve a cor de fundo padrão (#£8f8f8) da barra 

de navegação e a faz branca. 

Linha 2 Sobrescrevemos o padding padrão do Bootstrap para os elementos a da 

barra de navegação que é maior do que aquele previsto para o nosso 
layout. 

Linha 3 Definimos a cor azul, prevista para o estado over dos links. 

Linha 4 Declarar @media (min-width:lpx) tem o efeito de sobrescrever as regras de 

estilo padrão para todas as larguras de viewport. Se não tivéssemos 
lançado mão deste artifício as regras CSS contidas nas linhas 5 a 11 va- 
leriam apenas para larguras de viewport menores que 768px (lembra-se 
do princípio mobile-first do desenvolvimento das CSS do Bootstrap?). 

Linhas 5 a 10 Examinando a folha de estilo do Bootstrap encontramos as regras 
CSS para estilizar as barras de navegação. Ali estão as declarações 
para bordas cinzas e arredondadas, altura mínima de 50px, margens 
conforme mostrado na figura 6.3. As declarações CSS contidas nestas 
linhas estilizam a barra de navegação superior de acordo com o layout 
do iMasters. 

Linha 11 Estiliza os links da barra de navegação na cor preta. 

Observe na figura 6.4 o resultado da segunda etapa. 


H Portal Fórum 7Masters Ferramentas Cursos online Agenda Revista iMasters interCon 


Q Q Q EB EB E9 Fa Ça Login / Cadastre-se 


Figura 6.4 - Segunda etapa da criação do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. 
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6.2.3 Terceira etapa: barra do logotipo e caixa de busca 

Nesta etapa, iremos criar e personalizar a barra azul que contém o logotipo e a 
caixa de busca do site. Para esta barra definimos um atributo id com valor barrai. 

A marcação HTML para esta barra é conforme mostrada a seguir. 


• HTML 

1. <div class="row"> 

2. <div class="col-lg-12"> 

3. <div td=" barrai "> 

4. <ing src="imagens/branding . png" alt="logo iMasters"> 

5. <span class="texto-logo">+ de 11.000 artigos técnicos publicados en 12 anos</span> 

6. <forn class="navbar-forn navbar-right" role="search"> 

7. <div class=''forn-group"> 

8. <input type="text" class="forn-control" placeholder="Busca"> 

9. </div> 

10. <button type="subnit" class="btn btn -default">OK</button> 

11. </form> 

12. </di v> <!-- /#barral --> 

13. </div> 

14. </div> <! -- /.row --> 


Código comentado: 


Linha 

Linhas 1 e 14 
Linhas 2 e 13 
Linhas 3 e 12 

Linha 4 
Linha 5 


Linhas 6 a 11 


Descrição 

Deninimos uma linha para Container da barra. 

Criamos uma coluna dentro da linha Container da barra. 

Definimos um Container para o logotipo e o formulário com a finalidade 
de termos uma referência única para estilização. 

Insere a imagem do logotipo do iMasters. 

Marcação do texto ao lado do logotipo. Inserimos o texto dentro do 
Container span . texto-logo, pois iremos estilizá-lo de forma diferenciada, 
como veremos adiante. 

Marcamos o formulário de busca conforme estudado no item [4.7.3] . 


• css 

body { background: #f 5f 5f 5 uri (imagens/bg-header.png) repeat-x; } 
#barral { background: #64a7b7; paddlng: 20px; } 

.texto-logo { font-slze: 120%; color :#fff ; } 


[.../c6/imasters3.html] 
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Essas três regras CSS são suficientes para estilizar a barra do logotipo e caixa de 
busca. Notar que para estender a cor de fundo da barra usamos uma imagem, 
com repetição no eixo dos x, como fundo do elemento body. 

Observe na figura 6.5 o resultado da terceira etapa. 



| Portal Fórum 7Masters Ferramentas Cursos online Agenda Revista iMasters InterCon 


iMasters + de 1 1 .000 artigos técnicos publicados em 12 anos 


D Q O D BI 3 Faça Login / Cadastre-se 



Figura 6.5 - Terceira etapa da criação do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. 


6.2.4 Quarta etapa: mecanismo de navegação principal 

Nesta etapa, iremos criar e personalizar o mecanismo de navegação principal 
do site. 

Para criar este mecanismo de navegação, usaremos o componente do Bootstrap 
denominado barra de navegação com link dropdown estudada no item [4.7.5] , e 
marcada conforme o código mostrado a seguir. 

• HTML 

<div class=”row”> 

<div class="col-lg-12"> 

<nav class=''navbar navbar-default"> 

<div class=''navbar-header"> 

<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" 
data-target="#barraPrincipal"> 

<span class="sr-only">Toggle navigation</span> 

<span class= l 'icon-bar''x/span> 

<span class="icon-bar"x/span> 

<span class= l 'icon-bar''x/span> 

</button> 

<a class="navbar-brand hidden-lg hidden-nd hidden-sn" 

href="#" data-toggle="collapse" data-target="#barraPrincipal">Menu</a> 

</div> 

<div class="collapse navbar-colfapse" íd="barraPrincipal"> 
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<ul class="nav navbar-nav"> 

<U class="dropdown"> 

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 

aria-expanded=''false">Design &#038; UX<span class="caret "></span></a> 

<ul class="dropdown-nenu" role="menu"> 

<li><a href="#">User Experience</a></U> 

<U><a href="#">Arquitetura de Infornação</a></U> 

<!-- nais itens --> 

</ul> 

</li> 

<!-- nais dropdown --> 

<U><a href="#">Mapa do site</a></U> 

</ul> 

</div><! - - /.navbar-collapse --> 

</nav> 

</div> 

</div> <!-- /.row --> 

A marcação HTML mostrada é típica para criação de uma barra de navegação 
com links em menu dropdown como estudado no item [4.7.5]. 

• css 

1. #barraPrincipal { nargin-bottom:20px; background :#7bb3cl ! important; } 

2. #barraPrincipal li a { 

3. font-size:80%; 

4. text-transforn:uppercase; 

5. padding : 5px; 

6. color : #ff f ; 

7- } 

8. a:hover { text-decoration:none; } 

9. #barraPrincipal li ul li a { color :#333; } 

[.../c6/imasters4.html] 

Código comentado: 

Linha Descrição 

Linha 1 Definimos uma margem abaixo da barra de navegação e a cor de fundo 

azul-clara para a barra de navegação. 

Linha 2 a 7 Estilizamos os links da barra de navegação. 

Linha 8 Define a cor de fundo azul-clara para a barra. 
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Linha Descrição (cont.) 

Linha 9 Para os links do submenu, cujo fundo é branco, definimos uma cor 

escura para sob rescrever a cor branca definida para os links de abertura 
do submenu que estão em fundo azul. 

Observe na figura 6.6 o resultado da quarta etapa. 


| Portal Fórum 7Masters Ferramentas Cursos online Agenda Revista iMasters InterCon 


iMasters + de 1 1.000 artigos técnicos publicados em 12 anos 


DESIGN « UX - FRONT-END — OEV- BD- VOLKSWAGEN- MOBILE- MARKETING- GESTÃO APIS INFRA TECH E-COMMERCE ANALYTICS 


QQOQSS Faça Login 1 Cadastre-se 



Figura 6.6 - Quarta etapa da criação do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. Há inconsistências 
que serão tratadas nas etapas seguintes. 


6.2.5 Quinta etapa: destaques da semana 

Nesta etapa, iremos criar e personalizar os quatro blocos que promovem os artigos 
em destaque, publicados na semana, em diversas áreas do site. 

Para alcançar os objetivos desta etapa, iremos usar uma linha do layout contendo 
quatro colunas em larguras de viewport maiores e dispostas em duas ou uma 
coluna em viewports menores. 

A marcação HTML é mostrada a seguir. 

• HTML 

<section class=”row destaques”> 

<div class="coL-sm-3 col-xs-6"> 

<figure><a href="#" title="Cerencie sites en WP e destaque-se no mercado"> 

<ing src=''inagens/banner- para -anuncios.jpg" class="ing-responsive" 
alt="banner para anúncios"></a> 

<figcaption class="bcl"><a href="#" 

title="Gerencie sites en WP e destaque-se no nercado" cLass="ccl"> 

Gerencie sites en WP e destaque-se no nercado</a> 

</figcaption> 

</figure> 

</div> 

<div cLass="col-sn-3 col-xs-6"> 
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<!-- semelhante ao anterior --> 

</div> 

<div class= " col - sn - 3 col-xs-6"> 

<!-- semelhante ao anterior --> 

</div> 

<div class="col-sm-3 col-xs-6"> 

<!-- semelhante ao anterior --> 

</div> 

</div> 

</section> <!-- /.row --> 

No código anterior, mostramos a marcação HTML completa somente para o 
primeiro bloco, abreviando-a para os três seguintes, pois a marcação para eles é 
semelhante à do primeiro item, exceto as classes bcl e ccl que para estes três blo- 
cos são: bc2 e cc2, bc3 e cc3 e bc4 e cc4 respectivamente. Estas classes se destinam a 
estilizar cor de fundo e cor de textos para cada um dos blocos. 

Notar ainda a definição de colunas em <div class="col-sm-3 col-xs-6"> destinada a 
posicionar os quatro blocos em uma linha, duas linhas e quatro linhas conforme 
a largura da viewport. 


• css 


1. .destaques img { width : 100%; height: auto; } 

2. .destaques figcaption { 

3. font- size : 130%; 

4. background :#fff ; 

5. min - height : lO0px; 

6. padding : 10px 20px; 


7 - } 

4. .bcl { border-bottom: 

5. .ccl { display : block; 

6. . bc2 { border-bottom: 

7. ,cc2 { display: block; 

8. . bc3 { border-bottom: 

9. ,cc3 { display: block; 

10. ,bc4 { border-bottom: 

11. ,cc4 { display: block; 


6px solid #el734a; } 
color: #el734a; } 

6px solid #8d9b31; } 
color: #8d9b31; } 

6px solid #4476ab; } 
color: #4476ab; } 

6px solid #9c6496; } 
color: #9c6496; } 


[.../c6/imasters5.html] 
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Linha Descrição 

Linha 1 Por padrão as imagens inseridas na marcação HTML não são responsi- 

vas. Assim, declaramos a largura em 100% com a finalidade de fazê-las 
responsivas. 

Linha 2 a 7 Regras para estilizar o Container dos blocos. 

Linhas 4 a 11 Classes para estilizar as cores de fundo e dos textos em cada um dos 
quatro blocos. 

Observe na figura 6.7 o resultado da quinta etapa. 
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Figura 6.7 - Quinta etapa da criação do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. 


6.2.6 Sexta etapa: barra de notícias 

Nesta etapa, iremos criar e personalizar a barra de notícias com fundo na cor 
preta que se estende por toda a largura da viewport. Essa barra contém quatro 
notícias com texto na cor branca, sendo que para cada uma das notícias há um 
título em cor diferente. Sobre a margem inferior da barra há um link em uma 
pequena caixa com o texto +notícias. 

Para alcançar os objetivos desta etapa, a marcação HTML escolhida foi aquela 
que cria uma linha com quatro colunas, cada uma contendo uma notícia. O link 
+notícias esta contido dentro da linha. 

A marcação HTML para esta etapa é mostrada a seguir. 
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• HTML 

<div class=”container-fluid”> 

<section dass="row noticias"> 

<div class="container''> 

<div class="col-sn-3"> 

<h3><span class="ccl">Desenvolvinento</span> / 16 horas atrás</h3> 

<p><a href="#">Stack Overflow disponibiliza site en português</a></p> 

</div> 

<div class="col-sn-3"> 

<h3><span class="cc2">Mercado</span> / 17 horas atrás</h3> 

<p><a href="#">Vendas de tablets aunentan 50,6% en 2013, nas há sinais de 
saturação</a></p> 

</div> 

<div class="col-sn-3"> 

<h3><span class="cc3">Redes sociais</span> / 18 horas atrás</h3> 

<pxa href="#">Facebook estreia botão "retweet" no leitor de notícias Paper</ax/p> 
</div> 

<div class="col-sn-3"> 

<h3><span class="cc4">Tecnologia</span> / 18 horas atrás</h3> 

<p><a href="#">AMD anuncia prineira CPU baseada en ARM de 64 bits</a></p> 

</div> 

<a href="#" class="nais-noticias">+ noticias</a> 

</div> <!-- /.Container --> 

</section> <!-- /.row --> 

</div> <!-- /. Container -fluid --> 

• css 

1. .noticias { 

2. position:relative; 

3. background:#333; 

4. padding: 10px 0; 

5. nargin-top:20px; 

6 . } 

7. .noticias h3 { 

8. font-size:90%; 

9 color: #999; 

10. text-transforn:uppercase; 

11 . } 
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12. .noticias a { 

13. display : block; 

14. font-size: 150%; 

15. color : #fff ; 

16. } 

17. .noticias a:hover { color:#ccc; } 

18. a:hover { text-decoration:none; } 

19. a. nais- noticias { 

20. width : 160px; ; 

21. font-size:100%; 

22. text-align:center; 

23. background :#666; 

24. position:absolute; 

25. lef t : 50%; 

26. bottom : - 10px; 

27. margin-left: -80px; 

28. } 

29. (anedia screen and (nax-width:1200px) { 

30. body { 

31. background-inage:none; 

32. } 

33. } 

34. (anedia screen and (nax-width:992px) { 

35. forn[role="search"] { 

36. float : none ! inportant; 

37. } 

38. } 

[.../c6/imasters-final.html] 

Código comentado: 

Linha Descrição 

Linhas 1 a 6 Convém destacar a declaração de posicionamento relativo para a linha 
Container desta seção, essa declaração visa a criar um contexto de po- 
sicionamento para o link +notícias (ver linhas 24 a 27). 

Linhas 7 a 28 Estilização geral auto explicativa. 

Linhas 29 a 38 Regras específicas para breakpoins com a finalidade de evitar pequenas 
quebras no layout. Retire estas regras e observe o efeito ao redimensionar 
a janela do navegador. 
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Boostrap 3.3.5 


Observe na figura 6.8 o resultado da sexta etapa. 
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Figura 6.8 - Sexta etapa da criação do layout. 

Consulte o arquivo desta etapa e visualize o resultado no navegador. Redimensione 
a janela do navegador e observe o comportamento do layout. 
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